CSS animation-direction property
Description
CSS animation-direction property represents the direction of all or some animation cycles in the same or reverse direction. We take an example with 2 animation cycles but with different values of animation-direction.
In this case, all the animation timing functions such as ease-in, ease-out, ease-in-out are also reversed. For example, ease-in in normal direction becomes ease-out in the reverse direction.
Syntax
animation-direction : normal | reverse | alternate | alternate-reverse
Property values
normalDefault
-
represents normal direction of animation cycles.
animation-direction: normal;
reverse
-
represents animation cycles in the reverse direction.
animation-direction: reverse;
alternate
-
represents odd animation cycles in the normal direction while the even ones in the reverse direction.
In other words, 1, 3, and 5 will be in the normal direction while 2, 4, and 6 will be in the reverse direction.
animation-direction: alternate;
alternate-reverse
-
It is exactly opposite to alternate i.e. odd animation cycles in the reverse direction while the even ones in the normal direction.
In other words, 1, 3, and 5 will be in the reverse direction while 2, 4, and 6 will be in the normal direction.
animation-direction: alternate-reverse;
Applicable to
It applies to all elements
From web4college, the free CSS digger
Bookmark this page
Ctrl+D
