CSS animation-direction Property

The CSS animation-direction property sets how an animation should be played: forwards, backwards, or in alternate cycles. The default value is normal.

This page covers what each value does, how to use it together with the rest of the animation properties, and the gotchas that catch people out (such as why alternate looks broken until you raise the iteration count).

What animation-direction controls

When you define an animation with @keyframes, the rule describes a single pass from 0% to 100%. The animation-direction property decides which way each iteration plays that timeline:

Forwards — from 0% to 100% (the natural reading order of your keyframes).
Backwards — from 100% to 0%, which also reverses the timing function (an ease-in plays as ease-out).
Alternating — odd and even iterations run in opposite directions, so the element smoothly moves out and back without a jump.

This is what lets you write one set of keyframes and get a back-and-forth "ping-pong" effect for free, instead of authoring the return trip by hand.

When multiple comma-separated values are specified for any animation property, they are applied in order to the corresponding animations defined in animation-name.

The animation-direction property is one of the CSS3 properties, and it is usually set together with animation-iteration-count, animation-duration, and the other longhands or rolled up into the animation shorthand.

Initial Value	normal
Applies to	All elements, It also applies to ::before and ::after pseudo-elements.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.animationDirection = "reverse"

Syntax

Syntax of CSS animation-direction Property

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

Example of the animation-direction property:

Example of CSS animation-direction Property with normal value

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #ccc;
        position: relative;
        animation: myfirst 5s 1;
        animation-direction: normal;
      }
      @keyframes myfirst {
        0% {
          background: #8DC3CF;
          left: 0px;
          top: 0px;
        }
        25% {
          background: #1c87c9;
          left: 200px;
          top: 0px;
        }
        50% {
          background: #030E10;
          left: 200px;
          top: 200px;
        }
        75% {
          background: #666;
          left: 0px;
          top: 200px;
        }
        100% {
          background: #8ebf42;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-direction example</h2>
    <p>Here the animation plays forwards.</p>
    <div></div>
  </body>
</html>

Try it Yourself »

Example of the animation-direction property with the "reverse" value:

Example of CSS animation-direction Property with reverse value

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #ccc;
        position: relative;
        animation: myfirst 5s 1;
        animation-direction: reverse;
      }
      @keyframes myfirst {
        0% {
          background: #8DC3CF;
          left: 0px;
          top: 0px;
        }
        25% {
          background: #1c87c9;
          left: 200px;
          top: 0px;
        }
        50% {
          background: #030E10;
          left: 200px;
          top: 200px;
        }
        75% {
          background: #666;
          left: 0px;
          top: 200px;
        }
        100% {
          background: #8ebf42;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-direction example</h2>
    <p>In this example the animation plays as reverse.</p>
    <div></div>
  </body>
</html>

Try it Yourself »

Example of the animation-direction property with the "alternate" value:

Example of CSS animation-direction Property with alternate value

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #ccc;
        position: relative;
        animation: myfirst 5s 2;
        animation-direction: alternate;
      }
      @keyframes myfirst {
        0% {
          background: #8DC3CF;
          left: 0px;
          top: 0px;
        }
        25% {
          background: #1c87c9;
          left: 200px;
          top: 0px;
        }
        50% {
          background: #030E10;
          left: 200px;
          top: 200px;
        }
        75% {
          background: #666;
          left: 0px;
          top: 200px;
        }
        100% {
          background: #8ebf42;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-direction example</h2>
    <p>Here the animation plays first forwards, then backwards.</p>
    <div></div>
  </body>
</html>

Try it Yourself »

Example of the animation-direction property with the "alternate-reverse" value:

Example of CSS animation-direction Property with alternate-reverse value

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #ccc;
        position: relative;
        animation: myfirst 5s 2;
        animation-direction: alternate-reverse;
      }
      @keyframes myfirst {
        0% {
          background: #8DC3CF;
          left: 0px;
          top: 0px;
        }
        25% {
          background: #1c87c9;
          left: 200px;
          top: 0px;
        }
        50% {
          background: #030E10;
          left: 200px;
          top: 200px;
        }
        75% {
          background: #666;
          left: 0px;
          top: 200px;
        }
        100% {
          background: #8ebf42;
          left: 0px;
          top: 0px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-direction example</h2>
    <p>Here the animation plays backwards, then forwards.</p>
    <div></div>
  </body>
</html>

Try it Yourself »

Using it inside the animation shorthand

animation-direction is just one part of an animation. You can set it on its own, but it is most often written as part of the animation shorthand, where the direction keyword can appear anywhere among the other values:

/* name | duration | timing-function | iteration-count | direction */
animation: myfirst 5s ease-in-out 2 alternate;

Both of the rules below describe exactly the same animation:

/* Longhand */
.box {
  animation-name: myfirst;
  animation-duration: 5s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

/* Shorthand — equivalent */
.box {
  animation: myfirst 5s 2 alternate;
}

Common gotchas

alternate needs more than one iteration. With the default animation-iteration-count: 1 the animation runs only once, so the "return trip" never happens and alternate looks identical to normal. Set the count to 2 (or higher, or infinite) to see the effect.
reverse is not the same as alternate. reverse plays every iteration from end to start; alternate flips direction each iteration. Use reverse to permanently run keyframes backwards, and alternate for a back-and-forth loop.
The timing function reverses too. When an iteration plays backwards, its timing function is mirrored, which keeps the easing visually consistent at the turning points.

Values

Value	Description	Play it
normal	It is the default value, the animation plays forwards.	Play it »
reverse	The animation plays backwards. Each time you run the animation, it will reset to the end and start over. Timing function is also reversed.	Play it »
alternate	At first the animation moves forwards, then backwards. Requires `animation-iteration-count` ≥ 2 to be visible.	Play it »
alternate-reverse	At first the animation moves backwards, then forwards. Requires `animation-iteration-count` ≥ 2 to be visible.	Play it »
initial	Sets the property to its default value.
inherit	Inherits the property from its parent element.

Practice

What are the possible values for the CSS Animation-direction property?