result 1 - Animation Direction in CSS3 - Free Source Code

Animation Direction in CSS3 – Free Source Code

Posted on

result 1 - Animation Direction in CSS3 - Free Source Code

What’s animation-direction?

The animation-direction property
specifies whether or not or not the animation ought to play in reverse course or in alternate cycles.

If the animation-direction worth is “alternate”, the animation performed as regular each odd time (1,3,5,and many others…) and backwards each even time (2,3,6,and many others…).

Word: If the animation is ready to play solely as soon as, this property can have no impact.

Syntax of this property:

animation-direction: regular | reverse | alternate | alternate-reverse | preliminary | inherit ;

regular – it specifies that the animation needs to be performed as regular. (default)

reverse – it specifies that the animation needs to be performed in reverse course.

alternate – it specifies that the animation needs to be performed in regular course on odd cycles, and reverse course on even cycles.

alternate-reverse – it specifies that the animation needs to be performed in reverse course on odd cycles, and regular course on even cycles.

preliminary – it specifies that the worth of the property needs to be set to the default worth.

On this instance, it reveals two animations with totally different instructions:

result 1 - Animation Direction in CSS3 - Free Source Code