CSS animation-direction Property

What You’ll Learn

The animation-direction property controls which way a CSS animation plays. Use it to move elements forward, backward, or smoothly back and forth without a visible jump at the end of each cycle.

Definition and Usage

The animation-direction CSS property sets whether an animation runs from the first keyframe to the last, from last to first, or alternates between those directions on repeated cycles.

This is especially useful for bouncing loaders, sliding panels that return smoothly, pulsing indicators, and any motion that should feel continuous rather than snapping back to the start.

📝 Syntax

Set animation-direction with one of its keyword values:

selector {
  animation-direction: normal | reverse | alternate | alternate-reverse;
}

Basic Example

.box {
  animation: move 4s ease-in-out infinite;
  animation-direction: reverse;
}

Syntax Rules

• The initial value is normal, which plays keyframes from start to end.
• alternate and alternate-reverse only show their full effect when the animation repeats.
• When multiple animations run on one element, use comma-separated direction values matching each animation.
• Direction can be included in the animation shorthand after timing and iteration values.
• Combine with animation-iteration-count: infinite for continuous back-and-forth motion.

Default Value

The initial value of animation-direction is normal. The animation plays from the first keyframe to the last, and on each repeat it starts again from the beginning.

💎 Property Values

These keyword values define how animation cycles are played over time.

reverse vs alternate

Examples Gallery

Try animation-direction with reverse, alternate, normal, and shorthand syntax.

<style>
  @keyframes move {
    from { transform: translateX(0); }
    to { transform: translateX(200px); }
  }
  .box {
    width: 100px;
    height: 100px;
    background: blue;
    animation: move 4s ease-in-out infinite;
    animation-direction: reverse;
  }
</style>

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

.slider {
  animation: move 2s ease-in-out infinite;
  animation-direction: alternate;
}

.loader-bar {
  animation: fill 1.5s linear infinite;
  animation-direction: normal;
}

.pulse-dot {
  animation: pulse 1.2s ease-in-out infinite alternate-reverse;
}

💡 Best Practices