How to Create Moving Clouds Animation Effect in HTML and CSS

Moving clouds animation is a trending animation on websites. These types of animations are quite easy to code. In this tutorial, you will learn to create moving clouds.

Let us start with creating a HTML layout. For this, create a section clouds and divide it into the number of clouds you want to create. For example, in this case five clouds are required to be created.

CSS Structure

The styling of the CSS starts with the container class that acts as the sky for clouds. Next, the cloud shape is finalized by using the before and after selector. Further, the animation name moveclouds is applied for the duration of 15 seconds in the linear direction for the infinite time. Then, to give clouds a realistic effect every class for clouds is set with variable speed, opacity, and position of clouds is set in a definite direction.

*{ margin: 0; padding: 0;}

#clouds{
	padding: 100px 0;
	background: #c9dbe9;
	background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
	background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
	background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
overflow:hidden;
}
.cloud {
	width: 200px; height: 60px;
	background: #fff;
	border-radius: 200px;
	-moz-border-radius: 200px;
	-webkit-border-radius: 200px;
	position: relative;
}
.cloud:before, .cloud:after {
	content: '';
	position: absolute;
	background: #fff;
	width: 100px; height: 80px;
	position: absolute; top: -15px; left: 10px;
	border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	-moz-transform: rotate(30deg);
}
.cloud:after {
	width: 120px; height: 120px;
	top: -55px; left: auto; right: 15px;
}

.x1 {
	-webkit-animation: moveclouds 15s linear infinite;
	-moz-animation: moveclouds 15s linear infinite;
	-o-animation: moveclouds 15s linear infinite;
}

.x2 {
	left: 200px;
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0.6; /*opacity proportional to the size*/
	/*Speed will also be proportional to the size and opacity*/
	/*More the speed. Less the time in 's' = seconds*/
	-webkit-animation: moveclouds 25s linear infinite;
	-moz-animation: moveclouds 25s linear infinite;
	-o-animation: moveclouds 25s linear infinite;
}
.x3 {
	left: -250px; top: -200px;
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8; /*opacity proportional to the size*/
	-webkit-animation: moveclouds 20s linear infinite;
	-moz-animation: moveclouds 20s linear infinite;
	-o-animation: moveclouds 20s linear infinite;
}
.x4 {
	left: 470px; top: -250px;
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	transform: scale(0.75);
	opacity: 0.75; /*opacity proportional to the size*/
	-webkit-animation: moveclouds 18s linear infinite;
	-moz-animation: moveclouds 18s linear infinite;
	-o-animation: moveclouds 18s linear infinite;
}
.x5 {
	left: -150px; top: -150px;
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8; /*opacity proportional to the size*/
	-webkit-animation: moveclouds 20s linear infinite;
	-moz-animation: moveclouds 20s linear infinite;
	-o-animation: moveclouds 20s linear infinite;
}
@-webkit-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}

Here is the final output of the code.

Animated Moving Clouds

Leave a Reply Cancel reply