Posted on Mar 2, 2020

Make Flying Airplane Using CSS Animation

In this tutorial, we are going to make a fly airplane on a web page using CSS animation. Check the final version of this animation here:

Please open an empty pen to follow this tutorial by clicking on this link:
codepen.io/pen

Watch Video Tutorial

If you prefer video over text, you can watch this video too:

Step 1: Create Sky

Create a full-screen div and set the background color to blue.

HTML

 <div class="sky"> </div>

CSS

*{ margin: 0; padding: 0; } .sky{ width: 100%; height: 100vh; position: relative; background-color: #00ccff; overflow-x: hidden; }

Step 2: Add Clouds

Create animated clouds using keyframes on top.

HTML

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

CSS

.clouds{ position: absolute; top:50px; height: 100px; right: 0; left: -2000px; width: 500%; background-image: url(https://i.ibb.co/7S6qn59/clouds.png); background-repeat: repeat-x; animation: clouds 50s linear infinite; } @keyframes clouds{ 100%{ transform: translateX(2000px); } }

Step 3: Insert Mountains

Create animated mountains using keyframes on the bottom.

HTML

 <div class="sky"> <div class="clouds"></div> <div class="mountains"></div> </div>

CSS

.mountains{ position: absolute; bottom:0; height: 250px; right: 0; left: -2000px; width: 500%; background-image: url(https://i.ibb.co/zJbfkgZ/mountain.png); background-repeat: repeat-x; animation: mountains 10s linear infinite; } @keyframes mountains{ 100%{ transform: translateX(2000px); } } .airplane{ top: 180px; left:40%; position: absolute; z-index: 1; }

Step 4: Make Airplane

Create an airplane on the center and add to flames for its engines.

HTML

 <div class="sky"> <div class="airplane"> <img src="https://i.ibb.co/SPpRcJz/airplane.png"> <div class="flame"></div> <div class="flame flame2"></div> </div> </div>

CSS

 .airplane{ top: 180px; left:40%; position: absolute; z-index: 1; } .flame{ top: -40px; left: 150px; height: 10px; width:60px; position: relative; border-radius: 50%; background-color: #ffffff; animation: flame 0.3s linear infinite; z-index: -1; } .flame2{ top: -195px; left: 115px; } @keyframes flame{ 0%{ transform: translateX(0%); } 50%{ transform: translateX(50%); } 100%{ transform: translateX(0%); } }