Pure CSS Moving Cloud Animation

In this post, you will be looking at a really cool animation of moving clouds, like the one shown in the following demo.

Nowadays, many websites have animations of moving images. This one is no different. These kind of animations are pretty easy to code which I will be showing you in three simple steps.

Step 1

For this animation, I took an image of clouds and animated it. Make a div and give the cloud image as its background image. Then, enclose the div within another div which will serve as the wrapper div.

HTML

<div id="sky">
	<div id="clouds"></div>
</div>

CSS

#clouds {
	background-image: url('pic.jpg');
	background-size: cover;
}

Step 2

Give the image div width 200% so that we see only 100% (i.e. half of the image) on the screen at a time, to see a continuous image while the image scrolls.

Give overflow: hidden to the outer div to prevent horizontal scroll bar (since the image div width is twice the screen width).

CSS

#sky {
	overflow: hidden;
}
#clouds {
	width: 200%;
	height: 400px;
	background-image: url('pic.jpg');
	background-size: cover;
}

Step 3

Now it's time for animation. For that, @keyframes rule is used. The idea is to place the left end of the image at margin-left: 0px at the start of animation and at margin-left: -100% at the end of animation. As an effect of this, the first half of the image is visible as the animation starts, and the second half of the image is visible as the animation is 100% complete.

Finally, to make the image last forever, give the value infinite to the property animation. I named the animation 'movingclouds' and the animation duration 25 sec. The more the animation duration, lesser will be the speed of animation.

So, the final code is given below.

HTML

<div id="sky">
	<div id="clouds"></div>
</div>

CSS

#sky {
	overflow: hidden;
}
#clouds {
	width: 200%;
	height: 400px;
	background-image: url('pic.jpg');
	background-size: cover;
	-webkit-animation: movingclouds 25s linear infinite;
	-moz-animation: movingclouds 25s linear infinite;
	-o-animation: movingclouds 25s linear infinite;
}
@keyframes movingclouds {
	0% {margin-left: 0%;}
	100% {margin-left: -100%;}
}