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

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


ALSO READ  Simple Password Strength Meter using CSS and JavaScript

Comments are closed.