How to Make Multiple and Repeatable CSS Animations


Using simple animations can give your website pages a visual boost.

How to Make Multiple and Repeatable CSS Animations

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!

HTML

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:

SCSS

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. 

Author

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.