How to Make Multiple and Repeatable CSS Animations
Using simple animations can give your website pages a visual boost.
Bcakground animations can be some of the most unexpected yet appealing effects that anyone can add to their website. These simple actions can engage with visitors, catch their attention, or draw their eye to an important element of a website.
However, not all animations are created equal. A few rules of thumb:
1) The animations should be subtle.
It's not 1998. There's no need for backgrounds animations to strobe violently in order to gain a visitor's attention.
2) They should fit with your website's overall branding message and identity.
Animations can be a great way to add character to your website. But if that movement feels out-of-character and forced for the sake of being "trendy," it's best to avoid adding it entirely.
3) Never compromise the rest of your code for the sake of getting this one element to work.
Hopefully, the third point won't be an issue if you follow this simple tutorial!
The HTML uses default Bootstrap classes for the layout and general responsive hero style. The bubbles are represented simple divs, with the SCSS doing the heavy lifting:
For the animation, the code uses an iterative function to make each bubble a random height from 1-30. It also uses negative delay to delay the animation after the first run, and the random function again to change the z, y, and z axes of the translate3d css feature for each bubble.
See the animation in action before you adjust it to your own website.