Categories
CSS Web development

CSS Paper Plane Animation

Yesterday I’ve made a tutorial on how to draw a paper plane in Adobe Illustrator. I’ve got some messages from you (thank you for all messages!) about the tutorial of the paper plane but created with HTML and CSS.

CSS Paper Plane

So, yes it is possible. You can easily create a paper plane using CSS only. Follow the steps below and watch the video tutorial.

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

Step1.

Add HTML

<div class="container">
  <div class="paperplane">
    <div class="right"></div>
    <div class="left"></div>
    <div class="bottom"></div>
    <div class="top"></div>
    <div class="middle"></div>
  </div>
  <div class="clouds">
    <div class="cloud1"></div>
    <div class="cloud2"></div>
    <div class="cloud3"></div>
  </div>
</div>

Step2.

Add CSS

Set the background size and the colour:

body {
  background-color: #50befa;
  height: 100vh; 
}

Add container:

.container {
  position: relative;
  
}

Style the paper plane:

.paperplane {
  position: relative;
  left: 40%;
  top: 100px;
  -webkit-animation: move 9s linear infinite, updown 4s linear infinite;
}
.right {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 45px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 230px solid white;
  transform: rotate(61deg); 
}
.bottom {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 45px solid #676d70;
  top: 142px;
  transform: rotate(-5deg);
  left:-105px;
  z-index:-1;
}
.top {
  position:absolute;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 60px solid #c1c7c9;
  top: 130px;
  transform: rotate(5deg);
  left:-120px;
  z-index:-3;
}
.middle {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 270px solid #c1c7c9;
  top: -27px;
  transform: rotate(72deg);
  left:-15px;
  z-index:-2;
}
.left {
  position: absolute; 
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-bottom: 270px solid white;
  transform: rotate(78deg) skewY(-35deg); 
  left:-37px;
  z-index:2;
  top:-60px;
}
Paper plane

Add some clouds:

.clouds {
  position: absolute;
}

.cloud1 {
  position: absolute;
  background-color: white;
  z-index:-15;
  width: 150px;
  height: 100px;
  border-radius: 50% 50% 5px 5px;
  top: 100px;
  left: 200px;
  opacity:0.6;
  
}
.cloud1:after {
  content:"";
  position: absolute;
  background-color: white;
  width: 100px;
  height: 50px;
  border-radius: 50% 50% 5px 5px;
  left: 100px;
  top: 50px;

}

.cloud1:before {
  position: absolute;
  content:"";
  background-color: white;
  width: 100px;
  height: 50px;
  border-radius: 50% 50% 5px 5px;
  left: -70px;
  top: 50px;
}
.cloud2 {
  position: absolute;
  background-color: white;
  z-index:-15;
  width: 150px;
  height: 100px;
  border-radius: 50% 50% 5px 5px;
  top: 250px;
  left: 600px;
  opacity:0.7;
}
.cloud2:after {
  content:"";
  position: absolute;
  background-color: white;
  width: 100px;
  height: 50px;
  border-radius: 50% 50% 5px 5px;
  left: -70px;
  top: 50px;

}

.cloud2:before {
  content:"";
  position: absolute;
  background-color: white;
  width: 80px;
  height: 50px;
  border-radius: 50% 50% 5px 5px;
  left: 130px;
  top: 50px;
  opacity: 1;
  
  
}
.cloud3 {
  position: absolute;
  background-color: white;
  z-index:-15;
  width: 150px;
  height: 100px;
  border-radius: 50% 50% 5px 5px;
  top: 100px;
  left: 1400px;
  opacity:0.5;
}
.cloud3:after {
  content:"";
  position: absolute;
  background-color: white;
  width: 100px;
  height: 50px;
  border-radius: 50% 50% 5px 5px;
  left: -70px;
  top: 50px;

}
.cloud3:before {
  position: absolute;
  content:"";
  background-color: white;
  width: 100px;
  height: 50px;
  border-radius: 50% 50% 5px 5px;
  left: 120px;
  top: 50px;
}
CSS Paper plane

Step3.

Add CSS Animation

To make a paper plane fly:

@-webkit-keyframes updown {
	20% { transform: rotate(3deg); }	
	40% { transform: rotate(-3deg); }
	60% { transform: rotate(3deg); }	
	80% { transform: rotate(-3deg); }	 
	100% { transform: rotate(0deg); }
}

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

Notice: I added to keyframes animations: updown, and move.

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

Enjoy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *