Categories
CSS HTML Web development

Thinking about traveling? CSS Plane Animation

Thinking about travelling? Me…yes. Unfortunately, we need to wait to travel again.

*animation opened in the Safari browser.
To see the live output of the animation click here.

To create CSS Plane Animation follow the steps below:

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation

Step1.

Add HTML

<div class="container">
  <div class="clouds">
    <div class="cloud"></div>
    <div class="cloud1"></div>
    <div class="cloud2"></div>
    <div class="cloud3"></div>
  </div>
  <div class="plane">
    <div class="body">
      <div class="pollution"></div>
      </div>
    <div class="window">
      <div class="window1"></div>
  </div>
</div>
  <div class="mountains">
    <div class="mountain1"></div>
    <div class="mountain2"></div>
    <div class="mountain3"></div>
    <div class="mountain4"></div>
    <div class="mountain5"></div>
    <div class="mountain6"></div>
    <div class="mountain7"></div>
    <div class="mountain8"></div>
  </div>
</div>

Step2.

Add CSS

Set the colour of the background:

body {
  background-color: #bae6f5;
  background-size: 100vh;
}

Style the container and the plane: 

.container {
  position: relative;
  
}
.plane {
  position: relative;
  left: 40%;
  top: 200px;
  animation: move 9s linear infinite;
}
.body {
  position: absolute;
  background-color: #fff;
  width: 250px;
  height: 50px;
  border-radius: 20px 50px 50px 50px;
  box-shadow:inset -15px -15px 1px #157ea1;
}
.body:after {
  content:"";
  position: absolute;
  width: 60px;
  height: 150px;
  border-radius: 30px 30px 30px 30px;
  background-color: #fff;
  transform: skew(50deg);
  border-racius: 30px;
  top:-50px;
  left: 110px;
  
}
.body:before {
  position: absolute;
  content:"";
  background-color:#fff;
  width: 25px;
  height: 40px;
  top:-20px;
  left: 0;
  border-radius: 20px;
  
}

.window {
  position: absolute;
  background-color: #3bbfeb;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #d2d5d6;
  z-index:1;
  top: 5px;
  left: 170px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}
.window:after {
  position: absolute; 
  content:"";
  background-color: #3bbfeb;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #d2d5d6;
  z-index:1;
  left: -50px;
  top:-4px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
  
}
.window:before {
  content:"";
  position:absolute; 
  background-color: #3bbfeb;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #d2d5d6;
  z-index:1;
  left: -95px;
  top:-4px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}
.window1 {
  position:absolute; 
  background-color: #3bbfeb;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #d2d5d6;
  z-index:1;
  left: -140px;
  top:-4px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
}
.window1:after { 
  content:"";
  position: absolute;
  background-color: #3bbfeb;
  width: 25px;
  height: 20px;
  border: 4px solid #d2d5d6;
  left: 180px;
  top: -5px;
  transform:skew(20deg); 
  border-radius: 20px;
  box-shadow:inset -5px -5px 0 rgba(0,0,0,0.07);
 }

Add coluds:

.clouds {
  position: absolute;
  left: 175px;
}
 .cloud {
  position: absolute;
  top: 120px;
  left: 200px;
  background-color: white;
  height: 20px;
  width: 40px;
  z-index: 7;
  border-radius: 40px 40px 0 0;
  opacity: 0.8;
  animation: cloud 12s linear alternate infinite;   
  }
.cloud::before {
    content: "";
    position: absolute;
    background-color: white;
    height: 60px;
    width: 120px;
    border-radius: 60px 60px 0 0;
    bottom: 0;
    right: 20px;
  }

.cloud1 {
  position: absolute;
  top: 200px;
  left: 300px;
  background-color: white;
  height: 20px;
  width: 40px;
  z-index: 8;
  border-radius: 40px 40px 0 0;
  opacity: 0.8;
  animation: cloud 10s linear alternate-reverse infinite;
}
.cloud1::before {
    content: "";
    position: absolute;
    background-color: white;
    height: 60px;
    width: 120px;
    border-radius: 60px 60px 0 0;
    bottom: 0;
    right: 25px;
  }
.cloud2 {
  position: absolute;
  top: 120px;
  left: 1000px;
  background-color: white;
  height: 20px;
  width: 40px;
  z-index: 7;
  border-radius: 40px 40px 0 0;
  opacity: 0.8;
  animation: cloud 12s linear alternate infinite;   
  }
.cloud2::before {
    content: "";
    position: absolute;
    background-color: white;
    height: 60px;
    width: 120px;
    border-radius: 60px 60px 0 0;
    bottom: 0;
    right: 20px;
  }

.cloud3 {
  position: absolute;
  top: 200px;
  left: 1300px;
  background-color: white;
  height: 20px;
  width: 40px;
  z-index: 8;
  border-radius: 40px 40px 0 0;
  opacity: 0.8;
  animation: cloud 10s linear alternate-reverse infinite;
}
.cloud3::before {
    content: "";
    position: absolute;
    background-color: white;
    height: 60px;
    width: 120px;
    border-radius: 60px 60px 0 0;
    bottom: 0;
    right: 25px;
  }

Add mountains:

.mountains {
  position: absolute;
}
.mountain1 {
  position: absolute;
  left: 90px;
  top: 340px;
  bottom: 0;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  border-bottom: 190px solid #32a852;
  z-index: 1;
  opacity: 0.6;
}
.mountain1:after {
  content:"";
  position: absolute;
  border-bottom: 100px solid #edfeff;
  border-left: 85px solid transparent;
  border-right: 85px solid transparent;
  z-index:2;
  left: -85px; 
}
.mountain1:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:3;
  top: 50px;
  left:-40px; 
}
.mountain2 {
  position: absolute;
  top: 350px;
  bottom: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #32a852;
  z-index: 1;
}
.mountain2:after {
  content:"";
  position: absolute;
  border-bottom: 90px solid #edfeff;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  z-index:2;
  left: -75px; 
}
.mountain2:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:3;
  top: 50px;
  left:-40px; 
}
.mountain3 {
  position: absolute;
  left: 490px;
  top: 340px;
  bottom: 0;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  border-bottom: 190px solid #32a852;
  z-index: 1;
  opacity: 0.6;
}
.mountain3:after {
  content:"";
  position: absolute;
  border-bottom: 100px solid #edfeff;
  border-left: 85px solid transparent;
  border-right: 85px solid transparent;
  z-index:2;
  left: -85px; 
}
.mountain3:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:3;
  top: 50px;
  left:-40px; 
}
.mountain4 {
  position: absolute;
  top: 350px;
  left: 650px;
  bottom: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #32a852;
  z-index: 1;
}
.mountain4:after {
  content:"";
  position: absolute;
  border-bottom: 90px solid #edfeff;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  z-index:2;
  left: -75px; 
}
.mountain4:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:3;
  top: 50px;
  left:-40px; 
}
.mountain5 {
  position: absolute;
  left: 790px;
  top: 340px;
  bottom: 0;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  border-bottom: 190px solid #918c76;
  z-index: -1;
  opacity: 0.6;
}
.mountain5:after {
  content:"";
  position: absolute;
  border-bottom: 100px solid #edfeff;
  border-left: 85px solid transparent;
  border-right: 85px solid transparent;
  z-index:2;
  left: -85px; 
}
.mountain5:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:2;
  top: 50px;
  left:-40px; 
}
.mountain6 {
  position: absolute;
  top: 350px;
  left: 1250px;
  bottom: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #32a852;
  z-index: 1;
}
.mountain6:after {
  content:"";
  position: absolute;
  border-bottom: 90px solid #edfeff;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  z-index:2;
  left: -75px; 
}
.mountain6:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:3;
  top: 50px;
  left:-40px; 
}
.mountain7 {
  position: absolute;
  left: 1790px;
  top: 340px;
  bottom: 0;
  border-left: 160px solid transparent;
  border-right: 160px solid transparent;
  border-bottom: 190px solid #918c76;
  z-index: -1;
  opacity: 0.6;
}
.mountain7:after {
  content:"";
  position: absolute;
  border-bottom: 100px solid #edfeff;
  border-left: 85px solid transparent;
  border-right: 85px solid transparent;
  z-index:2;
  left: -85px; 
}
.mountain7:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:2;
  top: 50px;
  left:-40px; 
}
.mountain8 {
  position: absolute;
  top: 350px;
  left: 1550px;
  bottom: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 180px solid #32a852;
  z-index: 1;
}
.mountain8:after {
  content:"";
  position: absolute;
  border-bottom: 90px solid #edfeff;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  z-index:2;
  left: -75px; 
}
.mountain8:before {
  content:"";
  position: absolute;
  border-top: 70px solid #edfeff;
  border-left: 35px solid transparent;
  border-right: 45px solid transparent;
  z-index:3;
  top: 50px;
  left:-40px; 
}

Airplane pollution:

.pollution {
  position: absolute;
  background-color: #fff;
  top: 30px;
  left: -55px;
  width: 50px;
  height: 20px;
  border-radius: 20px;
  opacity: 0;
  animation: steam 1s linear infinite;
  z-index:4; 
}
.pollution:after {
  content:"";
  position: absolute;
  background-color: #fff;
  top: 10px;
  left: -65px;
  width: 50px;
  height: 20px;
  border-radius: 20px;
  opacity: 0;
  animation: steam 2s linear infinite;
  z-index:4; 
}
.pollution:before {
  content:"";
  position: absolute;
  background-color: #fff;
  top: -15px;
  left: -85px;
  width: 50px;
  height: 20px;
  border-radius: 20px;
  opacity: 0;
  animation: steam 3s linear infinite;
  z-index:4; 
}

Step3.

Add CSS Animation

To make the plane move:

@keyframes move{  
  from{ 
    left:-200px; 
  }
  to{ 
    left:130%; 
  }
}

For clouds:

@keyframes cloud {
  100% {
    transform: translateX(95px);
  }
}

For airplane pollution:

@keyframes steam { 
    20% {opacity: 0.6;}
    35% {left: 100px opacity: 0.6;}
    70% {left: 70px  opacity: 0;} 
  }

To see the live output of the animation go to lenastanley.com.

Enjoy coding!