Make Flying Airplane Using CSS Animation
Tags: css, animation, tutorial, html
Published: 2020-03-02 10:43:50

---
title: Make Flying Airplane Using CSS Animation
published: true
description: In this tutorial, we are going to make a fly airplane on a web page using CSS animation.
tags: CSS, Animation, Tutorial, HTML
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/niej69an5nv08eh9ru9e.jpg
---

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:

{% codepen https://codepen.io/basir/pen/poJwxvQ %}

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

## Watch Video Tutorial
If you prefer video over text, you can watch this video too:
 {% youtube -mwpELBvRwE %}

## Step 1: Create Sky

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

### HTML

```html
  <div class="sky">

  </div>
```
### CSS
```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

```html
  <div class="sky">
    <div class="clouds"></div>
  </div>
```
### CSS
```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

```html
  <div class="sky">
    <div class="clouds"></div>
    <div class="mountains"></div>
  </div>
```
### CSS
```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

```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
```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: 
* [https://codepen.io/basir/pen/poJwxvQ?editors=1100](https://codepen.io/basir/pen/poJwxvQ?editors=1100)

Also, download images from here:
* [All images on my site](https://codingwithbasir.com/tutorials/how-to-make-website-with-animation-flying-airplane-using-css-animation/)
* clouds.png: [https://i.ibb.co/7S6qn59/clouds.png](https://i.ibb.co/7S6qn59/clouds.png)  
* mountain.png: [https://i.ibb.co/zJbfkgZ/mountain.png](https://i.ibb.co/zJbfkgZ/mountain.png)
* airplane.png: [https://i.ibb.co/SPpRcJz/airplane.png](https://i.ibb.co/SPpRcJz/airplane.png)