BlogsDope image BlogsDope

CSS3 Moving Cloud Animation With Airplane

June 4, 2017 CSS HTML ANIMATION 4499

An animated website is always loved by users and draws more attention, whether it is the background which is animating or a moving element. Generally, a moving background makes the website lively and eventful, unless the animation is unnecessarily superfluous. In this post, I have come up with a similar animation of moving the sky elements.

Just unselect the HTML and CSS tabs in the following demo to have a better view of the animation.

See the Pen CSS3 Moving Clouds by Aakhya Singh (@aakhya) on CodePen.

This is a simple animation made using just CSS. Any beginner with minimal knowledge of HTML and CSS can learn to create such animations. The entire code is explained below in steps.

The Structure

The basic structure consists of a div which represents the sky. It has eight child div, seven of which are clouds and one airplane.

HTML

<div id="sky">
   <div id="cloud1" class="cloud"></div>
   <div id="cloud2" class="cloud"></div>
   <div id="cloud3" class="cloud"></div>
   <div id="cloud4" class="cloud"></div>
   <div id="cloud5" class="cloud"></div>
   <div id="cloud6" class="cloud"></div>
   <div id="cloud7" class="cloud"></div>
   <div id="aeroplane"></div>
</div> 

The Styling

Now comes the main part of the code that is responsible for all styling and animation.

Step 1

The parent div with id 'sky' covers the entire width of the viewport by default. It is given a height of 400 px and a bluish background color with a linear gradient, with blue color at top and white at the bottom. It is also given overflow: hidden to prevent the overflow of its components, thus preventing horizontal scrollbar.

CSS

#sky {
    overflow: hidden;
    background: #C6D9E8;
    background: -webkit-linear-gradient(top, #C6D9E8 0%, #fff 100%);
    background: -linear-gradient(top, #C6D9E8 0%, #fff 100%);
    background: -moz-linear-gradient(top, #C6D9E8 0%, #fff 100%);
    height: 400px;
}

Step 2

All the children of the element with id 'sky' are positioned relative to it. Therefore, it is given position: relative and all its children are given position: absolute.

CSS

#sky {
    position: relative;
    overflow: hidden;
    background: #C6D9E8;
    background: -webkit-linear-gradient(top, #C6D9E8 0%, #fff 100%);
    background: -linear-gradient(top, #C6D9E8 0%, #fff 100%);
    background: -moz-linear-gradient(top, #C6D9E8 0%, #fff 100%);
    height: 400px;
}
.cloud {
	position: absolute;
}
#aeroplane {
	position: absolute;
}

Step 3

Now, let's style and position all the seven clouds.

First of all, the properties common to all the clouds are given to the class 'cloud'. All the seven div are given the same background image of cloud and width and height 176px and 114px respectively. I chose these dimensions of the div because the size of the image of cloud is also the same. The property background-repeat: no-repeat prevents repetition of the background in the div.

CSS

.cloud {
    position: absolute;
    background-image: url('https://www.dl.dropboxusercontent.com/s/31ivp5fsjcgytgp/cloud1.png');
    background-repeat: no-repeat;
    width: 176px;
    height: 114px;
}

These were the common properties for all the clouds. You must have noticed in the demo that the position, size and color of the clouds are different. So, let's give specific properties to the seven clouds.

First cloud - It is placed at 40px from the top and 400px from the left edge of its parent div. Further, all the clouds are given animation named 'movingclouds' with some animation time duration. The lesser the time duration, the faster will be the animation. So, the bigger clouds are given lesser time duration than the smaller ones. The animation iteration count is also set to infinite so that the animation goes on forever.

CSS

#cloud1 {
    top: 40px;
    left: 400px;
    -webkit-animation: movingclouds 10s linear infinite;
    -moz-animation: movingclouds 10s linear infinite;
    -o-animation: movingclouds 10s linear infinite;
}

The second cloud has the same properties as that of the first one, with a different position and animation speed.

Third cloud : To give a feel that this one is farther away from the viewer, it is made smaller having lesser speed. It is scaled down to 0.9 times the image size using the scale function of the transform property and its opacity is also reduced to 0.9.

CSS

#cloud3 {
    top: 100px;
    left: 100px;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.9; 
    -webkit-animation: movingclouds 15s linear infinite;
    -moz-animation: movingclouds 15s linear infinite;
    -o-animation: movingclouds 15s linear infinite;
}

The seven clouds : The opacity of the clouds are given proportional to their size. Also, the smaller clouds are given more animation time.

CSS

.cloud {
    position: absolute;
    background-image: url('https://www.dl.dropboxusercontent.com/s/31ivp5fsjcgytgp/cloud1.png');
    background-repeat: no-repeat;
    width: 176px;
    height: 114px;
}

#cloud1 {
    top: 40px;
    left: 400px;
    -webkit-animation: movingclouds 10s linear infinite;
    -moz-animation: movingclouds 10s linear infinite;
    -o-animation: movingclouds 10s linear infinite;
}

#cloud2 {
    top: 10px;
    left: 600px;
    -webkit-animation: movingclouds 13s linear infinite;
    -moz-animation: movingclouds 13s linear infinite;
    -o-animation: movingclouds 13s linear infinite;
}

#cloud3 {
    top: 100px;
    left: 100px;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.9; 
    -webkit-animation: movingclouds 15s linear infinite;
    -moz-animation: movingclouds 15s linear infinite;
    -o-animation: movingclouds 15s linear infinite;
}

#cloud4 {
    top: -20px;
    left: 40px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.8; 
    -webkit-animation: movingclouds 20s linear infinite;
    -moz-animation: movingclouds 20s linear infinite;
    -o-animation: movingclouds 20s linear infinite;
}

#cloud5 {
    top: 100px;
    left: 500px;
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 0.7; 
    -webkit-animation: movingclouds 25s linear infinite;
    -moz-animation: movingclouds 25s linear infinite;
    -o-animation: movingclouds 25s linear infinite;
}

#cloud6 {
    top: 20px;
    left: 200px;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0.5; 
    -webkit-animation: movingclouds 27s linear infinite;
    -moz-animation: movingclouds 27s linear infinite;
    -o-animation: movingclouds 27s linear infinite;
}

#cloud7 {
    top: 92px;
    left: 700px;
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    transform: scale(0.4);
    opacity: 0.4; 
    -webkit-animation: movingclouds 29s linear infinite;
    -moz-animation: movingclouds 29s linear infinite;
    -o-animation: movingclouds 29s linear infinite;
}

Step 4

Now it's time for animating the clouds.

For animation, the @keyframes rule is used. At the start of the animation, the clouds are given margin-left: 100% i.e. the clouds which were positioned 20px from the left edge of the viewport will be placed at the 20px to the right from the right edge of the viewport. At the completion of one iteration of the animation, these are given margin-left: -150%.

CSS

@keyframes movingclouds {
	0% {margin-left: 100%;}
	100% {margin-left: -150%;}
}
@-webkit-keyframes movingclouds {
	0% {margin-left: 100%;}
	100% {margin-left: -150%;}
}
@-moz-keyframes movingclouds {
	0% {margin-left: 100%;}
	100% {margin-left: -150%;}
}

Step 5

Coming to the aeroplane, its styling is similar to that of the clouds.

CSS

#aeroplane{
    position: absolute;
    background-image: url('https://www.dl.dropboxusercontent.com/s/5beukq1zg37jlr7/airbus.png');
    background-repeat: no-repeat;
    width: 200px;
    height: 70px;
    -webkit-animation: movingplane 10s linear infinite;
    -moz-animation: movingplane 10s linear infinite;
    -o-animation: movingplane 10s linear infinite;
}

Step 6

This is the final step in which we will be animating the plane.

At the start of the animation, the plane is positioned at the right side of the right edge of the viewport and 300 from the top.

At 29% completion of the animation, it is placed at 50px from the top and given margin-left: 50%, thus placing it at the horizontal center of the screen. Also, it is rotated 20 degrees clockwise using the rotate function of the transform property.

From 29% to 31%, the angle of rotation of the plane is changed from 20 degrees to -20 degrees.

At 60% completion, the plane is moved to the left side of the screen and at 300px from the top.

CSS

@keyframes movingplane {
	0% { 
        margin-left: 100%;
        top:300px;
    }
    29% { 
        margin-left: 50%; 
        top: 50px; 
        -webkit-transform: rotate(20deg);
	    -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
	    transform: rotate(20deg);
    }
    31% {
        -webkit-transform: rotate(-20deg);
	    -moz-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
	    transform: rotate(-20deg);
    }
    60% {
        margin-left: 0%; 
        top 300px;    
    }
    100% {
        margin-left: -100%;
        top: 300px;
    }
}
@-webkit-keyframes movingplane {
	0% { 
        margin-left: 100%;
        top:300px;
    }
    29% { 
        margin-left: 50%; 
        top: 50px; 
        -webkit-transform: rotate(20deg);
	    -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
	    transform: rotate(20deg);
    }
    31% {
        -webkit-transform: rotate(-20deg);
	    -moz-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
	    transform: rotate(-20deg);
    }
    60% {
        margin-left: 0%; 
        top 300px;    
    }
    100% {
        margin-left: -100%;
        top: 300px;
    }
}
@-moz-keyframes movingplane {
	0% { 
        margin-left: 100%;
        top:300px;
    }
    29% { 
        margin-left: 50%; 
        top: 50px; 
        -webkit-transform: rotate(20deg);
	    -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
	    transform: rotate(20deg);
    }
    31% {
        -webkit-transform: rotate(-20deg);
	    -moz-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
	    transform: rotate(-20deg);
    }
    60% {
        margin-left: 0%; 
        top 300px;    
    }
    100% {
        margin-left: -100%;
        top: 300px;
    }
}

So that was it. A cool animation of moving sky without using Javascript or any plugin.

Conclusion

In this post, I showed you how to create a beautiful moving sky animation using just CSS with free demo and source code. You can copy and paste the code for your website or can create some new animations. If you have created something similar, then share it with us in the comment section. You can see a similar animation from Pure CSS Moving Cloud Animation.


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).