Fundamentals of CSS3 animation keyframes

Parth Jasani
Feb 26 Β· 3 min read

When we hear animation our mind think out of the box about interactivity πŸ˜ƒ

1st rule to become CSS animation master, think with logic and creative mind 🌟

When we saw any interactive animated website we generally think how do they do it? As a Front-End developer, we love CSS and CSS3. And there is one of the coolest property is animation in CSS3. With the help of keyframes.

If we learn all the fundamentals of the CSS3 then we can develop any type of animation. here I share one CSS3 animation example and tell you how it works. So are you ready to rock and roll? 😡

Before we start with animation I recommend to review the following links

So now you have a clear idea about Transform, Transition, and Animation (keyframes). If not then don’t worry here I show you a real example.

2nd rule you have to decide which property will use for which animation

Here are some quick overview of CSS3 property

  • transform : translateX(100px) : Move element 100px horizontally
  • transform : translateY(100px) : Move element 100px vertically
  • transform : translateZ(-100px) : Move element 100px far from screen
  • transform : rotateX(45deg) : Rotate element 45deg on X-axis
  • transform : rotateY(45deg); : Rotate element 45deg on Y-axis
  • transform : rotateZ(45deg) : Rotate element 45deg on Z-axis
  • transform : scaleX(0.5) : Decrease element size 50% horizontally, the value must be between 0 to 1.
  • transform : scaleY(0.5) : Increase element size 50% Vertically.
  • transform : scaleZ(2) : Increase element size double .

3rd rule understand how to use percentage in @keyframes (animation)

First of all, we have to understand the relationship between animation and @keyframes. animation is a CSS3 property to apply animation on the element which we create using keyframes. Let's see how many animation properties in CSS.

  • animation-name : flying : It defines the animation name, So there must be@keyframes flying rule.
  • animation-duration : 3000ms : It defines 3000 millisecond an animation should take to complete
  • animation-delay : 1000ms : 1000 millisecond delay before starting the animation.
  • animation-iteration-count : 3 : It specifies the number of times an animation should run, And we can make it also infinite.
  • animation-direction : reverse : The animation is played in reverse direction (backwards), other values normal, alternate, alternate-reverse
  • animation-timing-function : ease-in : It specifies the speed curve with the slow start of the animation, other values ease, linear, ease-out, ease-in-out and cubic-bezier(n,n,n,n)
  • We can write in single line also like animation: flting 3000ms 1000ms infinite reverse ease-in-out

keyframes

  • The @keyframes a rule specifies the animation code.
  • The animation is created by gradually changing from one set of CSS styles to another.
  • We have to define the percentage from 0 to 100, and we have to define all animation between this percentage, 0% means on animation start 50% means on half of the animation and 100% means on the end of animation.
  • We can define any percentage between 0 to 100%. as well as we can use from β€” to which represent 0% to 100%.

Example

4th rule whenever you see any awesome things in the browser start digging code with dev tools

Here I share a demo of a helicopter and cloud animation which I developed in pure CSS3

There are many keyframes and animation, review it and try to develop your own and be an ANIMATION MASTER πŸ’ͺ

Thanks for reading this article πŸ˜ƒ if you like it, just clap it πŸ‘

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium β€” and support writers while you’re at it. Just $5/month. Upgrade