Posted on Mar 2, 2020

Make Flying Airplane Using CSS Animation

#css #animation #tutorial #html

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