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.

// Global .orange-yellow { overflow: hidden; background: linear-gradient(358deg,#ffea02 0,#ff8d02 78%,#ff8d02 80%,#ff8d02 100%); } .hgroup-400 { height: 400px; @media screen and (max-width: 768px) { min-height: 300px; } } .orange { background-color: #ff910e; border-color: #ff910e; color: #fff; } .btn { text-transform: uppercase; } .btn-lg { padding: .5rem 2rem; font-size: 1rem; line-height: 1.5; border-radius: 2rem; } // Hero Styles @keyframes move { 100% { transform: translate3d(0, 0, -3000px); } } .bubbles { transform-style: preserve-3d; position: relative; } .bubble-wrap { margin: 0 auto; position: absolute; top: 0; left: 0; right: 0; border: 0; height: 100%; width: 100%; transform-style: preserve-3d; transform-origin: center center; perspective: 300px; overflow: hidden; } .bubble { position: absolute; background: black; opacity: .7; border-radius: 50%; animation: move 5s infinite; } @for $i from 1 through 50 { .bubble:nth-child(#{$i}){ $size: random(30)+px; height: $size; width: $size; animation-delay: -$i * .2s; transform: translate3d( (random(2000) * 1px), (random(1000) * 1px), (random(2000) * 1px)); background: hsl( random(48) , 70%, 50%); } } .dan-in-space-ship { bottom: 0; right: 0; position: absolute; width: 100%; } .moon-base { background: url(/_/images/moon-base.png); background-repeat: no-repeat; background-size: contain; background-position: bottom; } @media screen and (max-width: 992px) { .dan-in-space-ship { opacity: .5; z-index: -100; } } @media screen and (max-width: 720px) { .dan-in-space-shup { right: -200px; } }

See the animation in action before you adjust it to your own website.