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

#CSS digger
Was this article helpful?

 
arrow
×

Ctrl+D