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.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="paperplane">
  <div class="plane">
    <div class="wingRight"></div>
    <div class="wingLeft"></div>
    <div class="bottom"></div>
    <div class="top"></div>
    <div class="middle"></div>
  </div>
   <div class="clouds">
    <div class="cloudOne"></div>
    <div class="cloudTwo"></div>
    <div class="cloudThree"></div>
  </div>
</div>

Step2.

Add CSS

Set the colour and position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.paperplane {
  position: relative;
  overflow: hidden;
  width: 400px;
  height: 400px;
  background-color: #50befa;
  border-radius:50%;
}

.plane {
  position: absolute;
  left:200px;
  top:150px;
  animation: move 3s linear infinite;
}

Style the paper plane:

.wingRight {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 22.5px solid transparent;
  border-right: 12.5px solid transparent;
  border-bottom: 115px solid white;
  transform: rotate(61deg); 
  z-index:4;
}

.bottom {
  position: relative;
  width: 0;
  height: 0;
  border-left: 12.5px solid transparent;
  border-right: 12.5px solid transparent;
  border-bottom: 25.5px solid #676d70;
  top: 71px;
  transform: rotate(-5deg);
  left:-52.5px;
  z-index:3;
}

.top {
  position:absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 30px solid #c1c7c9;
  top: 65px;
  transform: rotate(5deg);
  left:-60px;
  z-index:1;
}

.middle {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 135px solid #c1c7c9;
  top: -13.5px;
  transform: rotate(72deg);
  left:-7.5px;
  z-index:2;
}

.wingLeft {
  position: absolute; 
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-bottom: 135px solid white;
  transform: rotate(78deg) skewY(-35deg); 
  left:-18.5px;
  z-index:3;
  top:-30px;
}
CSS Paper Plane

Add some clouds:

.clouds {
  position: absolute;
  top:50px;
  left:100px;
}
.cloudOne, .cloudTwo, .cloudThree {
  position: absolute;
  width: 50px;
  height: 25px;
  background-color: #fff;
  border-radius:100px 100px 0 0;
}

.cloudOne {
  top:0;
  left:0;
  animation: cloud 3s linear infinite reverse;
}

.cloudTwo {
  top:50px;
  left:100px;
  animation: cloud 2.5s linear infinite reverse;
}

.cloudThree {
  top:250px;
  left:50px;
  animation: cloud 2.8s linear infinite reverse;
}

.cloudOne:before, .cloudTwo:before, .cloudThree:before {
  content:"";
  position: absolute;
  width: 25px;
  height: 12.5px;
  background-color: #fff;
  border-radius:100px 100px 0 0;
  left:-20px;
  top:12.5px;
  box-shadow: 65px 0 #fff;
}
CSS Paper plane animation

Step3.

Add CSS Animation

For the paper plane:

@keyframes move {
  0% {transform: translateY(0) rotateX(0);}
  25% {transform: translateY(-30px) rotateX(40deg);}
  50% {transform: rotateX(0) translateY(0);}
  75% {transform: rotateX(-40deg) translateY(30px);}
  100% {transform: rotateX(0) translateY(0);}
}

To move clouds:

@keyframes cloud {  
  from{ 
    left:-150px; 
  }
  to{ 
    left: 400px; 
  }
}

Watch also the video tutorial:

Enjoy coding!