DEV Community

Cover image for Flying Helicopter with CSS Animation (step-by-step guide)
Programming with Shahan
Programming with Shahan

Posted on • Updated on

Flying Helicopter with CSS Animation (step-by-step guide)

Hey👨‍💻, welcome back.

In this article we gonna build a beautiful animation project using only HTML & CSS. This project is part of my "The Complete CSS3 Animations Course", and I assume that you are an intermediate-level CSS developer to build this project.
helicopter-project.gif
CSS3 Animation Properties That I used In this Project:

  • CSS Transformations
  • 3D Transformations
  • CSS Transitions
  • Animation
  • Custom Timing Function(keyframes)

So, are you excited to build this project? I'm too. Let's Begin 🏒

Note: In case you want to code along with me, I added full tutorial video at the bottom of this article. This helicopter shape was inspired by @frontendjoe

🏗 Defining Helicopter Structure Using HTML

Let's define a container in the main element called “helicopter” and inside this container write 4 div elements with class in order:

  • cockpit
  • tail
  • main
  • rotor

Inside this “rotor” class you have to add a div with class “rotator” along with two empty div inside this “rotator” class.

<html>
 <head>
 </head>
 <body>
  <main class="helicopter">
     <div class="cockpit"></div>
     <div class="tail"></div>
     <div class="main"></div>
     <div class="rotor">
       <div class="rotator">
         <div></div>
         <div></div>
       </div>
     </div>
     <main>
 </body>
</html>
Enter fullscreen mode Exit fullscreen mode

🚁Helicopter Design

In this section, we will design our HTML structure to turn into a helicopter shape.

Body

body {
  /* put elements into center */
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

.cockpit class

.cockpit {
    position: absolute;
    overflow: hidden;
    z-index: 1;
    width: 195px;
    height: 195px;
    border-radius: 100px 40px 50px 50px;
    background-color: #44d2fd;
}
Enter fullscreen mode Exit fullscreen mode

Output:
cockpit class output

Then we have to add glass to this cockpit class. So let's define glass shapes on .cockpit :before and :after:

.cockpit::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: -10px;
    left: -25px;
    width: 170px;
    height: 170px;
    border-radius: 40px;
    background-color: #302e37;
}
.cockpit::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: -60px;
    left: -60px;
    width: 170px;
    height: 170px;
    border-radius: 40px;
    background-color: rgba(255, 255, 255, 0.05);
}
Enter fullscreen mode Exit fullscreen mode

Output:
cockpit with glass shapes

.tail class

Now, we have to apply styles to .tail class:

.tail {
    position: absolute;
    top: 50px;
    left: 150px;
    transform-origin: left center;
    border-top: 10px solid transparent;
    border-bottom: 80px solid transparent;
    border-left: 350px solid #2fadd2;
    border-bottom-right-radius: 10px;
    height: 10px;
}
Enter fullscreen mode Exit fullscreen mode

Output:
Tail shapes with css

.main class

This class will be the helicopter rotator body:

.main {
    position: absolute;
    left: 130px;
    top: -10px;
    width: 40px;
    height: 20px;
    background: #302e37;
}
Enter fullscreen mode Exit fullscreen mode

Output:
main rotator shape

.rotor class

.rotor {
    width: 700px;
    height: 700px;
    border-radius: 350px;
    position: absolute;
    top: -360px;
    left: -200px;
    z-index: 2;
    overflow: hidden;
    background-color: #a299ab;
    opacity: 0.12;
    transform: scaleY(0.075);
}
Enter fullscreen mode Exit fullscreen mode

Output:
rotor shape image
After styling the main rotor, we have to target the two empty div inside this rotor to make this rotor realistic. You will see beautiful animation when we will apply rotate animation in the next lesson.

.rotator div {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -350px;
    margin-top: -30px;
    width: 700px;
    height: 80px;
    background-color: #fff;
}

.rotator div:nth-child(1){
    transform: rotate(0deg);
}

.rotor div:nth-child(2) {
    transform: rotate(90deg);
}
Enter fullscreen mode Exit fullscreen mode

Output:
Rotor class with rotator shape image

🛫Flying Capability

Up until now, we created our helicopter shape and design. But without animations and keyframes, there will be no animation. So, Let's give it flying power using CSS animation property.

⏱Defining @Keyframes

Before using the animation property, we need to create keyframes. For this project, we will create two @keyframs called:

  • bounce
  • rotate

bounce

@keyframes bounce {
    0%,100%{
        transform: translate(0px, -50px) rotate(-15deg);
    }
    50% {
        transform: translate(0px, 50px) rotate(-10deg);
    }
}
Enter fullscreen mode Exit fullscreen mode

rotate


@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

Enter fullscreen mode Exit fullscreen mode

📁Using Animation Property

So far, we defined two @keyframes for our helicopter project. Now, add them in our .helicopter & .rotator class.

.helicopter class

.helicopter {
    animation: bounce 5s infinite; /* adding bounce keyframes with duration 5s and infinite loop */
}
Enter fullscreen mode Exit fullscreen mode

.rotator class

.rotator {
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 350px;
    animation: rotate 0.6s linear infinite; /* added rotate @keyframs */
}
Enter fullscreen mode Exit fullscreen mode

Output:
helicopter-project.gif

🎬Full Tutorial

You can code along to build this project from scratch by following this video.

👏Conclusion

So, we learned how to create complex shapes and animation using only CSS. You even don't have to touch JavaScript. Hope you enjoy this project. You can subscribe to my YT channel if you are interested in Front-end dev.

Let me know what do you think after completing this project. Feel free to leave a comment below✍

☕_Buy me a coffee:
https://www.buymeacoffee.com/codewithshahan

🎿You can connect with me on:
Twitter
Linkedin
Github

Happy Coding!

Discussion (20)

Collapse
iamhtmldeveloper profile image
Amol Bhandare

Awesome work

Collapse
codewithshahan profile image
Programming with Shahan Author

Thank You

Collapse
profsofia profile image
profsofia

So awsome! 👏👏👏👏

Collapse
codewithshahan profile image
Programming with Shahan Author

Good luck

Collapse
olancheros profile image
Oscar Lancheros

Hey, this is so cool, thanks for sharing!

Collapse
codewithshahan profile image
Programming with Shahan Author

Thanks a lot bro.

Collapse
vivatvapk123 profile image
vivatvapk123

Good job actually this guidance is very useful to the visitors and thanks for posting this. Best regards from Viva TV Apk Tq.

Collapse
codewithshahan profile image
Programming with Shahan Author

Glad to hear that!

Collapse
dovakhiiin profile image
Jmungai-tech

Pretty cool

Collapse
codewithshahan profile image
Programming with Shahan Author

As I believe!

Collapse
souksyp profile image
Souk Syp.

Awesome!!

Collapse
codewithshahan profile image
Programming with Shahan Author

Exactly 🧐

Collapse
ivanovichenco profile image
Ivan Adolfo Calderon

Yes, it is genial. Thanks.

Collapse
codewithshahan profile image
Programming with Shahan Author

You're very welcome

Collapse
yousefsabealeish profile image
Yousef Sabe Al Eish

Thank You

Collapse
codewithshahan profile image
Programming with Shahan Author

You’re Welcome

Collapse
welekhak profile image
WeLekhak

This is nice
But looks like you have copied it from insta@frontendjoe

Collapse
codewithshahan profile image
Programming with Shahan Author

inspired by him🎉

Collapse
dev_laksh profile image
dev-laksh

Hey i am making a video on this project and featuring you also in my video.

Collapse
codewithshahan profile image
Programming with Shahan Author

Go ahead.