CSS: animation-direction

The animation-direction property chooses whether each cycle runs forward, backward, or alternates direction.

Back-and-forth example

.indicator {
  animation: move 600ms ease-in-out 2 alternate;
}

@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(2rem); }
}

alternate runs the first cycle forward and the next backward. reverse starts from the end of the keyframes.

Common mistakes

• Check how direction interacts with iteration count and fill mode.
• Do not use a looping direction to create constant distracting motion.
• Test reduced-motion behavior and provide a static state.