
Demo:
To create the CSS Plane Animation follow the steps below and watch the video tutorial:
- Add HTML
- Add CSS
- Add CSS Animation
Step1.
Add HTML
<div class="airplaneAnimation">
<div class="plane">
<div class="main"></div>
<div class="wingOne"></div>
<div class="wingTwo"></div>
<div class="pollution"></div>
</div>
<div class="clouds">
<div class="cloudOne"></div>
<div class="cloudTwo"></div>
<div class="cloudThree"></div>
</div>
</div>
Step2.
Add CSS
Set the colour and the position of the background and elements:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.airplaneAnimation {
position: relative;
width:400px;
height:400px;
border-radius:50%;
background-color: #caf0f8;
overflow: hidden;
}
Style the plane:
.plane {
position: relative;
left:0;
top:75px;
animation: fly 2s linear infinite;
}
.main {
position: absolute;
width: 220px;
height: 40px;
background-color: #0077b6;
top:100px;
left:100px;
border-radius: 0 100px 30px 100px;
overflow:hidden;
box-shadow: inset -10px -10px rgba(0,0,0,0.2);
z-index:2;
}
.main:before, .main:after {
content:"";
position: absolute;
background-color: #fdc921;
top:10px;
}
.main:before {
width:40px;
height:10px;
border-radius: 0 0 0 30px;
left: 190px;
}
.main:after {
width: 5px;
height: 10px;
border-radius:20px;
left:160px;
box-shadow: -10px 0 #fdc921,-20px 0 #fdc921, -30px 0 #fdc921, -40px 0 #fdc921, -50px 0 #fdc921, -60px 0 #fdc921, -70px 0 #fdc921, -80px 0 #fdc921, -90px 0 #fdc921, -100px 0 #fdc921, -110px 0 #fdc921, -120px 0 #fdc921;
}
.wingOne {
position: absolute;
width:20px;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
border-top: 80px solid #0077b6;
height:0;
top:115px;
left:160px;
transform: skew(-45deg) rotateX(30deg);
z-index:4;
}
.wingTwo {
position: absolute;
width:20px;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
border-bottom: 80px solid #023e8a;
height:0;
top:55px;
left:160px;
transform: skew(45deg) rotateX(30deg);
}
.wingTwo:after {
content:"";
position: absolute;
width:20px;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
border-bottom: 35px solid #0077b6;
height:0;
left:-100px;
top:29px;
}
.wingOne:after {
content:"";
position: absolute;
width:20px;
height:25px;
background-color: #0077b6;
top:-105px;
left:-140px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}
.wingTwo:before {
content:"";
position: absolute;
width:20px;
height:25px;
background-color: #023e8a;
left:-80px;
top:35px;
transform: skew(-55deg);
}

Add clouds:
.clouds {
position: absolute;
top:50px;
left:100px;
}
.cloudOne, .cloudTwo, .cloudThree {
position: absolute;
width: 50px;
height: 25px;
background-color: #fff;
border-radius:100px 100px 0 0;
}
.cloudOne {
top:0;
left:0;
animation: cloud 3s linear infinite reverse;
}
.cloudTwo {
top:50px;
left:100px;
animation: cloud 2.5s linear infinite reverse;
}
.cloudThree {
top:250px;
left:50px;
animation: cloud 2.8s linear infinite reverse;
}
.cloudOne:before, .cloudTwo:before, .cloudThree:before {
content:"";
position: absolute;
width: 25px;
height: 12.5px;
background-color: #fff;
border-radius:100px 100px 0 0;
left:-20px;
top:12.5px;
box-shadow: 65px 0 #fff;
}

Add airplane pollution:
.pollution {
position: absolute;
background-color: #fff;
top: 130px;
left: 65px;
width: 30px;
height: 10px;
border-radius: 20px;
opacity: 0;
animation: up 1s linear infinite;
}
.pollution:before, .pollution:after {
content:"";
position: absolute;
background-color: #fff;
border-radius:20px;
opacity:0;
width:30px;
height:10px;
}
.pollution:after {
top: 10px;
left: -25px;
animation: up 2s linear infinite;
}
.pollution:before {
top: -10px;
left: -35px;
animation: up 3s linear infinite;
}
Step3.
Add CSS Animation
To make the plane move up and down:
@keyframes fly {
0% {transform: translateY(0);}
25% {transform: translateY(-10px);}
50% {transform: translateY(0);}
75% {transform: translateY(10px);}
100% {transform: translateY(0);}
}
For clouds:
@keyframes cloud {
from{
left:-150px;
}
to{
left: 400px;
}
}
For airplane pollution:
@keyframes up {
20% {opacity: 0.7;}
35% {left: 100px opacity: 0.7;}
70% {left: 70px opacity: 0;}
}
Watch also the video tutorial:
Enjoy coding!
Hey, here’s something that might interest you: