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.
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, where 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.