How to Use animation-direction in CSS for Animation Control

The CSS property animation-direction controls the direction an animation plays. You can set it to normal, reverse, alternate, or alternate-reverse to make animations run forward, backward, or alternate directions on each cycle.

Syntax

The animation-direction property accepts these values:

• normal: Animation plays forward from start to end.
• reverse: Animation plays backward from end to start.
• alternate: Animation alternates direction each cycle, forward then backward.
• alternate-reverse: Animation alternates direction each cycle, starting backward then forward.

css

animation-direction: normal | reverse | alternate | alternate-reverse;

Example

This example shows a square that moves left to right and back using animation-direction: alternate. The animation runs continuously, reversing direction each time.

html+css

/* CSS */
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(200px); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  animation-name: slide;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* HTML */
<div class="box"></div>

Output

A green square moves smoothly from left to right and then back repeatedly.

Common Pitfalls

Common mistakes include:

• Not setting animation-iteration-count to more than 1 or infinite when using alternate, so the reverse direction never happens.
• Confusing reverse with alternate-reverse. reverse always plays backward; alternate-reverse alternates but starts backward.
• Forgetting to define keyframes properly, so the animation has no visible effect.

css

/* Wrong: animation-direction has no effect if iteration count is 1 */
.box {
  animation-name: slide;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-direction: alternate;
}

/* Right: infinite iteration to see alternate effect */
.box {
  animation-name: slide;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Quick Reference

Value	Description
normal	Animation plays forward each cycle.
reverse	Animation plays backward each cycle.
alternate	Animation alternates forward then backward each cycle.
alternate-reverse	Animation alternates backward then forward each cycle.

Key Takeaways

Use animation-direction to control if an animation plays forward, backward, or alternates direction.

Set animation-iteration-count to more than 1 or infinite to see alternate directions.

normal plays forward; reverse plays backward; alternate switches direction each cycle.

Define keyframes clearly to see visible animation effects.

Remember alternate-reverse starts playing backward then forward alternately.