Β 

Β 

Β 

CSS animations make it feasible to animate transitions from one CSS style configuration to another.

Animations consist of two elements ->

  • Style describing the CSS animation
  • Set of keyframes that indicate the start & end states of the animation’s style.

CSS '@keyframes' Rule ->

This rule is used to specify the animation rule & animation is created by using changeable CSS styles. CSS property can change many times during the animation. To get an animation to operate, we must bind the animation to an element.

Let's take up an example for better understanding - visit this page

[ we have animated the <div> element & the animation will last for 4 seconds, & it will gradually change the background color of the <div> element from "yellow" to "orange".

In the above example, we have defined when the style will change by using the keywords from and to { which signifies 0% (start) & 100% (complete)} ]

The animation-duration property defines how long time an animation should take to conclude. If the animation-duration property is not defined, no animation will happen, because the default value is 0s (zero seconds).

We can also use percentages to define the duration of the animation.

Let's take up an example for better understanding - visit this page

[ In the above example, we have changed the background color of the <div> element when the animation is 25% complete, 50% complete & when the animation is 100% complete ]

CSS Animation Properties

  • animation - It is a shorthand property for setting all the animation properties
  • @keyframes -Β  It defines the animation code
  • animation-delay - It defines a delay for the start of an animation
  • animation-duration - It defines how long time an animation should take to complete one cycle
  • animation-direction - It defines whether an animation should be played backwards, forwards, or in alternate cycles
  • animation-fill-mode - It defines a style for the element when the animation is not playing (before it starts after it ends, or both)
  • animation-iteration-count - It defines the number of times the animation should be performed.
  • animation-name - It declares the name of the @keyframes at-rule to manipulate.
  • animation-play-state - It represents whether the animation is paused or running
  • animation-timing-function It defines the speed curve of the animation

Browser support

Raheel R Z

Elite Team Member - LetsUpgrade