CSS animation-direction Property Tutorial

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.

Leave a Reply