Infinitely looping background animation

Picking the most common animation example out there is probably impossible, so I’ve chosen a few examples that will cover what I consider to be some of the more useful and interesting things CSS animations can be used for. We’ll go through each example in detail to put your CSS animation knowledge in action. I’ve purposely used examples where the HTML is quite simple and selfexplanatory so we can focus on the CSS
and the animation specific properties that drive them.

Infinitely looping background animation

Looking at our initial CSS, we have a shared style for our clouds, assigning the background image, width and height for both clouds. We have slightly different positioning and z-index set for each cloud individually, to stagger their appearance a bit:

Full Example CSS

body {
        background:#678bb3;
        padding:0;
        margin:0;
    }

.sky {
  width:100%;
        height:1000px;
        background: transparent url(../sky.jpg) top left no-repeat;
        background-size: 100% 100%;
        margin:auto;
        position:relative;
    }
    
    .cloud {
        width: 248px;
        height:131px;
    position: absolute;
        background:transparent url(../cloud.png) 0 0 no-repeat;
      }

    .cloud01 {
        top:100px;
    left:300px;
        z-index:100;
    animation:drift 25s linear infinite;
}

    .cloud02 {
        top:240px;
        z-index: 200;
    animation: drift 35s linear 10s infinite backwards;
 }

@keyframes drift {
  from {transform: translateX(-255px);}
  to {transform: translateX(1350px);}
 }

Full Example HTML

<div class="sky">
    <div class="cloud cloud01"></div>
    <div class="cloud cloud02"></div>
</div>


Let’s get these clouds moving! First, we’ll define our animation in keyframes and name it drift. Moving clouds across the sky seems like a perfect from and to keyframe opportunity since we don’t expect the clouds to make any stops along the way. So, our keyframes look like this:

@keyframes drift {
from {transform: translateX(-255px);}
to {transform: translateX(1350px);}
}

The key here is that I’ve chosen a from value that is so far off to the left the cloud will start out of sight, and a to value that is so far off to the right, it will also end the animation out of sight. I’m using translate instead of different positioning in my keyframes for the performance advantage (though the difference is likely negligible in such a small example). In addition, because it’s very unlikely I would use translate for any specific layout, it’s safe to assume my animation won’t cause any layout issues or unintentionally override layout styles. That's less of a concern in this isolated example, but separating your layout styles from your animated styles is a good habit to get into.

Next, we’ll assign this same animation to both clouds with slightly varying properties to get them both animating using the same keyframes. The handy thing about defining animations separately from assigning them is that it makes them easy to reuse. For our first cloud, we’ll assign the drift animation with a duration of twenty-five seconds, since clouds don’t tend to move like they’re in much of a hurry. We’ll set the animation-timing-function to linear to keep the speed constant across the movement and chose infinite for our animation-iteration-count. That will keep our cloud moving across the sky over and over. Well, infinitely.

.cloud01 { animation: drift 25s linear infinite; }

Our second cloud will use the same animation, but to mix things up a little, we’ll set a longer duration of thirty-five seconds, so that it moves slower than our first cloud and staggers their movements. Additionally, we’ll delay this animation by ten seconds, and set the animation-fill-mode to backwards. This way our cloud will take on the styles of our first keyframe (the from keyframe) during that ten second delay.

.cloud02 {animation: drift 35s linear 10s infinite backwards;}