Flying Plane Animation using HTML and CSS

In this tutorial, we are going to learn to create a flying plane animation using simple HTML and CSS. We will use “animation” CSS property to move the plane in sky background.

We need two images for the sky and for the plane. Here are the two image :

Sky : Download Image
Plane : Download Image

Follow this video for complete guidance :

Source Code :

<style type="text/css">
  body {
     background: url(sky.jpg);
     background-repeat: no-repeat;
     background-size: cover;
     overflow: hidden;
  }

  .sky {
    position: absolute;
    top: 30%;
    right: -500px;
    animation: sky 10s linear 0s infinite reverse;
    z-index: 99;
  }

  .sky img{
    width: 200px;
  }

  @keyframes sky {
    from {right:-500px;}
    to {right: 102%;}
  }
</style>

<div class="sky">
  <img src="plane.png">
</div>