--- layout: single property_name: animation-direction ---

#animation-direction

Defines in which direction the animation is played.

default animation-direction: normal;

The animation is played forwards. When it reaches the end, it starts over at the first keyframe.

animation-direction: reverse;

The animation is played backwards: begins at the last keyframe, finishes at the first keyframe.

animation-direction: alternate;

The animation is played forwards first, then backwards:

  • starts at the first keyframe
  • stops at the last keyframe
  • starts again, but at the last keyframe
  • stops at the first keyframe

animation-direction: alternate-reverse;

The animation is played backwards first, then forwards:

  • starts at the last keyframe
  • stops at the first keyframe
  • starts again, but at the first keyframe
  • stops at the last keyframe