Make Awesome CSS Animation / Flying Helicopter Using CSS Animation

Опубликовано: 18 Октябрь 2024
на канале: Programming with Shahan
1,993
70

In this tutorial, we will build a beautiful animation project with CSS3 animation

CSS animations allow us to animate HTML elements without using JavaScript. It's an incredibly useful and powerful tool that can add interest or creative excitement, direct the user's eye.

⛹️‍♂️ Background Image Gif:
https://i.pinimg.com/originals/e5/44/...

🚁 This helicopter shape was inspired by @frontendjoe
  / frontendjoe  

☕ Buy me a coffee
https://www.buymeacoffee.com/codewith...

⛳ CSS Animation Properties I used In this Project
CSS Transformations
3D Transformations
CSS Transitions
Animation
Custom Timing Function (keyframes)

🔔 Subscribe For More!
https://www.youtube.com/c/programming...

⌚ Timestamps
(00:00) Project Overview
(00:06) Defining structure Using HTML
(00:54) Implementing Shapes with CSS
(07:10) Applying CSS Animation
(11:08) Outro

This project is part of my "The Complete CSS3 Animations Course".

This course is for those who know some basic CSS but has zero skills in the CSS3 Animations field. I will teach you everything from scratch with hands-on coding projects using cutting-edge industry standards to become a professional CSS3 Developer.

After completing this course, you will feel confident to create any type of CSS animations project for your websites. Because, at the end of each chapter, I will put everything into practice and will be creating beautiful animations projects. Also, you will get the top animations resources & libraries that senior frontend developers use most often.

The projects that we will be building throughout this course:
Animated Callout Cards
Flying Bird
Bouncing Wheel
Flying Helicopter

👍 Thanks for watching!
Make sure to like + Subscribe For More! 🏋️‍♀️