CSS animation property

CSS animation

CSS animation property, is a shorthand property. It lets us to use multiple animation type CSS properties simultaneously.

animation shorthand properties are

  • animation-name : It is used to specify the name of the keyframe, which is used to bind with the animation.
  • animation-duration : It specifies the duration of the animation to complete.

  • animation-timing-function : Specify the speed type of the animation.

  • animation-delay : It is used to specify the delay before the animation starts.

  • animation-iteration-count : It is used to specify how many times the animation must be repeated.

  • animation-direction : It is used to specify in which direction the animation in done.

To support animation property on different browsers we need to add some prefixes, they are

  • -webkit- : It supports chrome, safari and new version of opera
  • -moz- : It support Firefox.
  • -o- : Old versions of opera.
  • -ms- : Internet explorer.

Example

Try Yourself

In the above example values used in animation property are,

animation1 - animation-name

1s - animation-duration

ease-in - animation-timing-function

3s - animation-delay

infinite - animation-iteration-count

alternate - animation-direction


animation-direction in css

It contain following four values,

  • normal : It is the default value animation starts from left to right.
  • reverse : Animation starts from right to left.
  • alternate : Animation occurs continuously, it first start from left and moves to right.
  • alternate-reverse : Animation occurs continuously, it first start from right and moves to left.

Example

Try Yourself