Animations using only CSS
An alternative to the Bubbles sample at: https://www.creativebloq.com/inspiration/css-animation-examples
This one has added support to IE11 and yes, it is responsive too.
To have the correct spacing calculation, consider to use Scss, something like:
$width: 500px;
$limit: 9;
@for $i from 1 to 10 {
.bubb-sm-#{$i + 1}{
/*IE Support*/
transform: translateX(ceil($width * ($i/$limit) - 11px));
}
}
See the working sample at: https://accedo-gps.000webhostapp.com/demo/css-bubbles/index.html
This option uses SVG, the downside with SVG, the CSS property transform is not supported at all in IE11 but you can change them and add them as attributes to the SVG element directly.
See a working demo using these choices at: https://accedo-gps.000webhostapp.com/demo/css-bubbles/svg-bubbles.html