CSS animation-direction Property

CSS animation-direction Property

The animation-direction property in CSS defines the direction in which an animation should play, including normal, reverse, alternate, and alternate-reverse.

1. Syntax

selector {
  animation-direction: value;
}

2. Accepted Values

Value	Description
normal (default)	The animation runs forward (from 0% to 100%).
reverse	The animation runs backward (from 100% to 0%).
alternate	The animation runs forward first, then backward.
alternate-reverse	The animation runs backward first, then forward.

3. Example – reverse (Plays Backward)

.box {
  width: 100px;
  height: 100px;
  background: red;
  animation: move 3s reverse infinite;
}

@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(300px); }
}

✅ The box starts from the right and moves left.

4. Example – alternate (Forward → Backward)

.box {
  animation: bounce 2s alternate infinite;
}

@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-50px); }
}

✅ The box bounces up and down continuously.

5. Example – alternate-reverse (Backward → Forward)

.box {
  animation: fade 3s alternate-reverse infinite;
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

✅ The box starts fully visible, fades out, then fades in.

6. Best Practices

✔ Use alternate for natural looping animations.
✔ Use reverse for playing animations in the opposite direction.
✔ Combine with animation-iteration-count: infinite for smooth, continuous effects.