loading...
Cover image for Make Flying Airplane Using CSS Animation

Make Flying Airplane Using CSS Animation

basir profile image Bassir Jafarzadeh (Programming Teacher) ・2 min read

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%);
  }
}

Download Source Code & Images

You can download the source code of this tutorial here:

Also, download images from here:

Discussion

pic
Editor guide
Collapse
nikhilroy2 profile image
nikhilroy2

canvas or svg is good than css designing. Thanks your tutorial .