animation-direction

Definition

animation-direction is a CSS property that specifies the direction of an animation.

Examples

/* Normal playback */
#normal {
  animation-name: example;
  animation-duration: 4s;
  animation-direction: normal;
  animation-iteration-count: 1;
}

/* Reverse playback */
#reverse {
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
  animation-iteration-count: 1;
}

/* Alternate playback */
#alternate {
  animation-name: example;
  animation-duration: 4s;
  animation-direction: alternate;
  animation-iteration-count: 2;
}

/* Alternate-reverse playback */
#alternate-reverse {
  animation-name: example;
  animation-duration: 4s;
  animation-direction: alternate-reverse;
  animation-iteration-count: 2;
}

In these examples, the animation named "example" will play once in the normal direction, once in the reverse direction, twice alternating between forward and backward playback, and twice alternating between backward and forward playback, respectively.

Values

Best Practices

1. Define the animation using the @keyframes rule before using it on an element.
2. Use the animation-name property to specify the name of the animation, and the animation-duration property to specify the length of the animation.
3. Use the animation-iteration-count property to specify the number of times the animation should play.
4. Use the animation-delay property to specify a delay before the animation starts.
5. Use the animation-fill-mode property to specify how the element should look when the animation is not playing.
6. Use the animation-timing-function property to specify the speed curve of the animation.
7. Use the animation-play-state property to pause and resume the animation.
8. Avoid overusing animations, as they can be distracting and make the user experience feel cluttered.

Browser Compatibility