In this section, we will learn what the animation-direction property is and how to use it in CSS.
Click here to run the example of animation-direction property.
CSS animation-direction Property Definition and Usage
CSS provided a property called `animation-direction` by which we can declare whether an animation should be played forwards, backwards or in alternate mode.
CSS animation-direction Property Syntax
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
CSS animation-direction Property Value
The values that we can set for `animation-direction` property are:
- normal: This is the default value and when used, it means the animation should start from the key-frame 0 and play towards the last key frame.
- reverse: When we use this value, it means the animation should start its cycle in a reverse mode, which means at the end of the animation towards the beginning point.
- alternate: Using this value, animation starts its cycle in normal (starting from the beginning) then at the end of its cycle, it will change to reverse mode.
- alternate-reverse: this is the complete opposite of “alternate” and using this value, animation starts its cycle in reverse, then at the end of its cycle, it will change to normal mode.
Note: set the iteration of the animation to at least 2 in order to see the effect of alternate and alternate-reverse mode.
Example: animation-direction property in CSS
See the Pen animation-direction property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
