
Thinking about travelling? Me…yes. Unfortunately, we need to wait to travel again.
To see the live output of the animation on the website click here.
Demo:
To create CSS Plane Animation follow the steps below:
- Add HTML
- Add CSS
- Add CSS Animation
Step1.
Add HTML
<div class="container">
<div class="clouds">
<div class="cloud"></div>
<div class="cloud1"></div>
<div class="cloud2"></div>
<div class="cloud3"></div>
</div>
<div class="plane">
<div class="body">
<div class="pollution"></div>
</div>
<div class="window">
<div class="window1"></div>
</div>
</div>
<div class="mountains">
<div class="mountain1"></div>
<div class="mountain2"></div>
<div class="mountain3"></div>
<div class="mountain4"></div>
<div class="mountain5"></div>
<div class="mountain6"></div>
<div class="mountain7"></div>
<div class="mountain8"></div>
</div>
</div>
Step2.
Add CSS
Set the colour of the background:
body {
background-color: #bae6f5;
background-size: 100vh;
}
Style the container and the plane:
.container {
position: relative;
}
.plane {
position: relative;
left: 40%;
top: 200px;
animation: move 9s linear infinite;
}
.body {
position: absolute;
background-color: #fff;
width: 250px;
height: 50px;
border-radius: 20px 50px 50px 50px;
box-shadow:inset -15px -15px 1px #157ea1;
}
.body:after {
content:"";
position: absolute;
width: 60px;
height: 150px;
border-radius: 30px 30px 30px 30px;
background-color: #fff;
transform: skew(50deg);
border-racius: 30px;
top:-50px;
left: 110px;
}
.body:before {
position: absolute;
content:"";
background-color:#fff;
width: 25px;
height: 40px;
top:-20px;
left: 0;
border-radius: 20px;
}
.window {
position: absolute;
background-color: #3bbfeb;
width: 20px;
height: 20px;
border-radius: 50%;
border: 4px solid #d2d5d6;
z-index:1;
top: 5px;
left: 170px;
box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}
.window:after {
position: absolute;
content:"";
background-color: #3bbfeb;
width: 20px;
height: 20px;
border-radius: 50%;
border: 4px solid #d2d5d6;
z-index:1;
left: -50px;
top:-4px;
box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}
.window:before {
content:"";
position:absolute;
background-color: #3bbfeb;
width: 20px;
height: 20px;
border-radius: 50%;
border: 4px solid #d2d5d6;
z-index:1;
left: -95px;
top:-4px;
box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}
.window1 {
position:absolute;
background-color: #3bbfeb;
width: 20px;
height: 20px;
border-radius: 50%;
border: 4px solid #d2d5d6;
z-index:1;
left: -140px;
top:-4px;
box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}
.window1:after {
content:"";
position: absolute;
background-color: #3bbfeb;
width: 25px;
height: 20px;
border: 4px solid #d2d5d6;
left: 180px;
top: -5px;
transform:skew(20deg);
border-radius: 20px;
box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}

Add coluds:
.clouds {
position: absolute;
left: 175px;
}
.cloud {
position: absolute;
top: 120px;
left: 200px;
background-color: white;
height: 20px;
width: 40px;
z-index: 7;
border-radius: 40px 40px 0 0;
opacity: 0.8;
animation: cloud 12s linear alternate infinite;
}
.cloud::before {
content: "";
position: absolute;
background-color: white;
height: 60px;
width: 120px;
border-radius: 60px 60px 0 0;
bottom: 0;
right: 20px;
}
.cloud1 {
position: absolute;
top: 200px;
left: 300px;
background-color: white;
height: 20px;
width: 40px;
z-index: 8;
border-radius: 40px 40px 0 0;
opacity: 0.8;
animation: cloud 10s linear alternate-reverse infinite;
}
.cloud1::before {
content: "";
position: absolute;
background-color: white;
height: 60px;
width: 120px;
border-radius: 60px 60px 0 0;
bottom: 0;
right: 25px;
}
.cloud2 {
position: absolute;
top: 120px;
left: 1000px;
background-color: white;
height: 20px;
width: 40px;
z-index: 7;
border-radius: 40px 40px 0 0;
opacity: 0.8;
animation: cloud 12s linear alternate infinite;
}
.cloud2::before {
content: "";
position: absolute;
background-color: white;
height: 60px;
width: 120px;
border-radius: 60px 60px 0 0;
bottom: 0;
right: 20px;
}
.cloud3 {
position: absolute;
top: 200px;
left: 1300px;
background-color: white;
height: 20px;
width: 40px;
z-index: 8;
border-radius: 40px 40px 0 0;
opacity: 0.8;
animation: cloud 10s linear alternate-reverse infinite;
}
.cloud3::before {
content: "";
position: absolute;
background-color: white;
height: 60px;
width: 120px;
border-radius: 60px 60px 0 0;
bottom: 0;
right: 25px;
}

Add mountains:
.mountains {
position: absolute;
}
.mountain1 {
position: absolute;
left: 90px;
top: 340px;
bottom: 0;
border-left: 160px solid transparent;
border-right: 160px solid transparent;
border-bottom: 190px solid #32a852;
z-index: 1;
opacity: 0.6;
}
.mountain1:after {
content:"";
position: absolute;
border-bottom: 100px solid #edfeff;
border-left: 85px solid transparent;
border-right: 85px solid transparent;
z-index:2;
left: -85px;
}
.mountain1:before {
content:"";
position: absolute;
border-top: 70px solid #edfeff;
border-left: 35px solid transparent;
border-right: 45px solid transparent;
z-index:3;
top: 50px;
left:-40px;
}
.mountain2 {
position: absolute;
top: 350px;
bottom: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 180px solid #32a852;
z-index: 1;
}
.mountain2:after {
content:"";
position: absolute;
border-bottom: 90px solid #edfeff;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
z-index:2;
left: -75px;
}
.mountain2:before {
content:"";
position: absolute;
border-top: 70px solid #edfeff;
border-left: 35px solid transparent;
border-right: 45px solid transparent;
z-index:3;
top: 50px;
left:-40px;
}
.mountain3 {
position: absolute;
left: 490px;
top: 340px;
bottom: 0;
border-left: 160px solid transparent;
border-right: 160px solid transparent;
border-bottom: 190px solid #32a852;
z-index: 1;
opacity: 0.6;
}
.mountain3:after {
content:"";
position: absolute;
border-bottom: 100px solid #edfeff;
border-left: 85px solid transparent;
border-right: 85px solid transparent;
z-index:2;
left: -85px;
}
.mountain3:before {
content:"";
position: absolute;
border-top: 70px solid #edfeff;
border-left: 35px solid transparent;
border-right: 45px solid transparent;
z-index:3;
top: 50px;
left:-40px;
}
.mountain4 {
position: absolute;
top: 350px;
left: 650px;
bottom: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 180px solid #32a852;
z-index: 1;
}
.mountain4:after {
content:"";
position: absolute;
border-bottom: 90px solid #edfeff;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
z-index:2;
left: -75px;
}
.mountain4:before {
content:"";
position: absolute;
border-top: 70px solid #edfeff;
border-left: 35px solid transparent;
border-right: 45px solid transparent;
z-index:3;
top: 50px;
left:-40px;
}
.mountain5 {
position: absolute;
left: 790px;
top: 340px;
bottom: 0;
border-left: 160px solid transparent;
border-right: 160px solid transparent;
border-bottom: 190px solid #918c76;
z-index: -1;
opacity: 0.6;
}
.mountain5:after {
content:"";
position: absolute;
border-bottom: 100px solid #edfeff;
border-left: 85px solid transparent;
border-right: 85px solid transparent;
z-index:2;
left: -85px;
}
.mountain5:before {
content:"";
position: absolute;
border-top: 70px solid #edfeff;
border-left: 35px solid transparent;
border-right: 45px solid transparent;
z-index:2;
top: 50px;
left:-40px;
}
.mountain6 {
position: absolute;
top: 350px;
left: 1250px;
bottom: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 180px solid #32a852;
z-index: 1;
}
.mountain6:after {
content:"";
position: absolute;
border-bottom: 90px solid #edfeff;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
z-index:2;
left: -75px;
}
.mountain6:before {
content:"";
position: absolute;
border-top: 70px solid #edfeff;
border-left: 35px solid transparent;
border-right: 45px solid transparent;
z-index:3;
top: 50px;
left:-40px;
}
.mountain7 {
position: absolute;
left: 1790px;
top: 340px;
bottom: 0;
border-left: 160px solid transparent;
border-right: 160px solid transparent;
border-bottom: 190px solid #918c76;
z-index: -1;
opacity: 0.6;
}
.mountain7:after {
content:"";
position: absolute;
border-bottom: 100px solid #edfeff;
border-left: 85px solid transparent;
border-right: 85px solid transparent;
z-index:2;
left: -85px;
}
.mountain7:before {
content:"";
position: absolute;
border-top: 70px solid #edfeff;
border-left: 35px solid transparent;
border-right: 45px solid transparent;
z-index:2;
top: 50px;
left:-40px;
}
.mountain8 {
position: absolute;
top: 350px;
left: 1550px;
bottom: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 180px solid #32a852;
z-index: 1;
}
.mountain8:after {
content:"";
position: absolute;
border-bottom: 90px solid #edfeff;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
z-index:2;
left: -75px;
}
.mountain8:before {
content:"";
position: absolute;
border-top: 70px solid #edfeff;
border-left: 35px solid transparent;
border-right: 45px solid transparent;
z-index:3;
top: 50px;
left:-40px;
}

Airplane pollution:
.pollution {
position: absolute;
background-color: #fff;
top: 30px;
left: -55px;
width: 50px;
height: 20px;
border-radius: 20px;
opacity: 0;
animation: steam 1s linear infinite;
z-index:4;
}
.pollution:after {
content:"";
position: absolute;
background-color: #fff;
top: 10px;
left: -65px;
width: 50px;
height: 20px;
border-radius: 20px;
opacity: 0;
animation: steam 2s linear infinite;
z-index:4;
}
.pollution:before {
content:"";
position: absolute;
background-color: #fff;
top: -15px;
left: -85px;
width: 50px;
height: 20px;
border-radius: 20px;
opacity: 0;
animation: steam 3s linear infinite;
z-index:4;
}
Step3.
Add CSS Animation
To make the plane move:
@keyframes move{
from{
left:-200px;
}
to{
left:130%;
}
}
For clouds:
@keyframes cloud {
100% {
transform: translateX(95px);
}
}
For airplane pollution:
@keyframes steam {
20% {opacity: 0.6;}
35% {left: 100px opacity: 0.6;}
70% {left: 70px opacity: 0;}
}
To see the live output of the animation go to lenastanley.com.
Enjoy coding!