Animation direction: animation-direction, step 2

The animation-direction property has two more values. They are used when the animation playback count animation-iteration-count is greater than one. And they both define the alternating animation duration.

If the alternate value is used, odd runs will be direct and even ones will be reversed.

.element {
  animation-name: move;
  animation-duration: 1s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

In our example, the animation move will be played twice: first forwards (odd run), then in reverse (even run).

If the alternate-reverse value is used, odd runs will be reversed and even ones will be played forwards.

Let’s see how it works in an example.