CSS animation-direction Property

Beginner
6 min read
Updated: Oct 2026
3 examples
Live preview
CSS animation-direction property turning a fade around with alternate
Definition

Definition and Usage

The animation-direction property sets whether an animation plays forward, backward, or turns around between plays. normal goes from the first keyframe to the last. reverse goes from the last back to the first. alternate switches direction on every play.

The turn only shows up when the animation repeats, so set animation-iteration-count to 2 or infinite. It applies to all elements, including ::before and ::after, and it is not inherited. Changing direction does not remove motion for someone who set prefers-reduced-motion.

Standard-track.

Not deprecated and not experimental. normal, reverse, alternate, and alternate-reverse have been widely available since 2015.

Syntax

CSS Syntax

syntax.css
animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;

The initial value is normal. For several animations, separate the keywords with commas, in the same order as the names.

Values

Property Values

ValueDescriptionTry it
normalEach play runs forward. The next play jumps back to the start. Initial valueTry it
reverseEach play runs backward. Steps and easing reverse too, then it jumps to the end againTry it
alternateOdd plays run forward. Even plays run backward. The count starts at oneTry it
alternate-reverseOdd plays run backward. Even plays run forward. The count starts at oneTry it
initialSets this property to its default value, normalTry it
inheritInherits this property from the parent elementTry it
Approach

How to Use animation-direction

Repeat a short fade, then change only the direction.

  1. Write @keyframes fade from full opacity to 0.25.
  2. Set animation-name, animation-duration: 1s, and animation-iteration-count: infinite.
  3. Set animation-direction to one keyword.
  4. Watch the second play. That is where alternate turns around.
PieceRequired?Role
A named animationYesDirection has nothing to flip without @keyframes
At least two playsTo see alternateOne play of alternate looks like normal
One keywordYesnormal is the initial value
Try it

Live Preview

The same one-second fade repeats. Only animation-direction changes.

normal jumps back to the start. alternate turns around.

Result

Fade

animation-direction: normal. Each play fades out, then jumps back.

Code

CSS Examples

Each snippet repeats one fade. The only change is animation-direction. Use Try It Yourself for a live editor.

Example 1 — Play Backward

The word starts dim and becomes bright, then jumps back to dim.

CSS
<style>
  @keyframes fade {
    from {
      opacity: 1;
    }

    to {
      opacity: 0.25;
    }
  }

  p {
    animation-name: fade;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
  }
</style>

<p>Fade</p>
Try It Yourself

How It Works

  1. Name the steps. fade goes from opacity 1 to 0.25.
  2. Repeat it. infinite starts a new play every second.
  3. Run backward. reverse begins at the to keyframe, so the word starts dim and becomes bright.
  4. It still jumps. The next play snaps back to dim. alternate would turn around instead.

Example 2 — Turn Around

The word fades out, then fades back in, and keeps going.

CSS
<style>
  @keyframes fade {
    from {
      opacity: 1;
    }

    to {
      opacity: 0.25;
    }
  }

  p {
    animation-name: fade;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
</style>

<p>Fade</p>
Try It Yourself

How It Works

  1. Use the same fade. One second, from full opacity to a quarter.
  2. Play it more than once. The direction change is on the second play. The odd and even count starts at one.
  3. Start forward. Play 1 is odd, so it runs from from to to and the word fades out.
  4. Then reverse. Play 2 is even, so it runs backward from dim back to full. It does not jump.

Example 3 — Start Backward

The first play fades in. The next play fades out.

CSS
<style>
  @keyframes fade {
    from {
      opacity: 1;
    }

    to {
      opacity: 0.25;
    }
  }

  p {
    animation-name: fade;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
  }
</style>

<p>Fade</p>
Try It Yourself

How It Works

  1. Keep the same steps. from is full opacity. to is a quarter.
  2. Open backward. alternate-reverse plays the first (odd) cycle from the end toward the start.
  3. The word starts dim. It fades up to full opacity on that first second.
  4. Then go forward. The next (even) play fades back out. One play alone would look like reverse.

Edge Cases & Pitfalls

If the direction seems to do nothing, the animation probably plays only once.

once

One play hides alternate

The count starts at 1. The first alternate play runs forward, so it matches normal until a second play begins.

jump

normal jumps on every repeat

Each new play starts at the first keyframe. alternate is the value that turns around instead of snapping back.

easing

reverse also flips the timing curve

Steps run backward, and animation-timing-function flips with them. An ease-in curve acts like ease-out while the play is reversed.

order

The shorthand can wipe the direction

animation: 1s infinite fade sets this property back to normal. Write animation-direction after it, or add the keyword inside the shorthand.

list

One keyword per animation name

animation-direction: alternate, reverse follows the order of animation-name. Fewer keywords than names, and the list repeats.

Compatibility

Browser Support

animation-direction is a browser style property. Node.js, Deno, and Bun do not play it. The versions below are the unprefixed property, including all four keywords.

✓ Baseline · Widely available since 2015

animation-direction

Chrome 43+, Firefox 16+, Safari 9+, Edge 12+, Internet Explorer 10+. normal, reverse, alternate, and alternate-reverse share these versions.

97% all four keywords
Google Chrome 43+
Full support
Mozilla Firefox 16+
Full support
Apple Safari 9+
Full support
Microsoft Edge 12+
Full support
Opera 30+
Full support
Samsung Internet 4+
Full support
Internet Explorer 10+
Full support
animation-direction Widely supported

Bottom line: Older Chrome, Safari, and Firefox also accepted a prefixed property. The four direction keywords shipped together with CSS animations.

Remember

Key Takeaways

  • Role: which way each play of an animation runs.
  • normal: the initial value. Forward, then a jump back to the start.
  • alternate: first play forward, next play backward. No jump.
  • Repeat: one play of alternate looks like normal.

One line: repeat the animation, then animation-direction decides whether the next play jumps or turns around.

Frequently Asked Questions

It sets which way each play runs. normal goes from the start keyframe to the end. reverse goes from the end back to the start. alternate and alternate-reverse switch direction on every play.
reverse runs backward every time, then jumps back to the end keyframe. alternate runs forward on the first play and backward on the next, so the animation turns around instead of jumping.
A single play of alternate runs forward, which matches normal. You need at least two plays, or infinite, before the second play runs backward. The odd and even count starts at one.
Yes. Steps run backward, and the easing flips too. An ease-in curve becomes ease-out while the play runs in reverse.
Yes. animation: 1s fade sets direction back to normal. Write animation-direction after the shorthand, or include the keyword in the shorthand, such as animation: 1s infinite alternate fade.
Chrome 43+, Firefox 16+, Safari 9+, Edge 12+, and Internet Explorer 10 support all four keywords. It is a browser style property, not a Node.js feature.

Next: animation-duration

Set how long one play lasts, in either direction.

animation-duration tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS animation-delay Property CSS animation-duration Property