animation-direction

Definition

The animation-direction CSS property is used to define whether an animation should play forwards, backwards or in alternate cycles.

.element {
  animation-direction: alternate;
}

The animation-direction property accepts the following values:

Value	Description
`normal`	The animation plays forwards. This is the default value.
`reverse`	The animation plays backwards.
`alternate`	The animation plays forwards, then backwards.
`alternate-reverse`	The animation plays backwards, then forwards.

Syntax

.loader {
  animation-direction: alternate;
}

Values

normal, reverse, alternate, alternate-reverse.

Practical Examples

.loader {
  animation: pulse 600ms ease-in-out infinite;
  animation-direction: alternate;
}

Alternate reverses the animation each cycle for ping-pong effects.

HTML

Code

<style>
@keyframes pulse-direction-demo { from { transform: scale(0.9); } to { transform: scale(1.1); } }
.pulse-direction-alt { animation: pulse-direction-demo 0.6s ease-in-out infinite alternate; }
.pulse-direction-base { animation: pulse-direction-demo 0.6s ease-in-out infinite; }
</style>
<div class="flex gap-4">
  <div class="h-10 w-10 rounded-full bg-sky-400 pulse-direction-alt"></div>
  <div class="h-10 w-10 rounded-full bg-sky-200 pulse-direction-base"></div>
</div>

Tips & Best Practices

Combine with alternate to avoid writing reverse keyframes.
Use alternate-reverse when starting from the end state feels more natural.

Accessibility & UX Notes

Keep oscillating motion subtle to avoid causing fatigue.

Browser Support

Supported in modern browsers.

animation-iteration-count for loop control.
animation-fill-mode to manage end states.
transform for scalable motion effects.