CSS3 animation-direction Property
To specify whether the animation should be played backward on alternate cycles .
Definition and Notes.
1. The CSS3 animation-direction property specifies whether a CSS animation with more than one cycle should always go the same direction or should reverse direction on every other cycle.
2. The possible values are normal , reverse , alternate , alternate-reverse.
CSS3 animation-direction property.
View in Splitscreen»
Code-Editor:Note- The values must be specified before the animation begins, it won't affect after the animation is set to play.
|normal||Every iteration of the animation plays in forward direction. Its the default value.|
|reverse||Iteration are performed in the reverse order from the defined by @keyframe rule|
|alternate||Beginning from 1, odd cycles are performed in normal direction while even cycle are run in reverse direction.|
|alternate-reverse||Beginning from 1, all odd cycles are performed in reverse, and even cycles in normal direction.|
|Value||normal | alternate [, normal | alternate]*|
|Applies to||block-level and inline-level elements|
|Computed Value||Same as declared value|