DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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!

Top comments (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πŸŽ‰

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›