CSS animation-direction

The animation-direction specifies the direction of the animation.

Possible values are forward, backward, and alternate (back and forth).



An element with animation-direction set to alternate.
The animation moves back and forth.

  .animate {
    width: 80px;
    height: 80px;
    background: steelblue;
    animation: alternateAnimation 1s infinite;
    animation-direction: alternate;

  @keyframes alternateAnimation {
    from { transform: none; }
    to { transform: translateX(250%); }

<div class="animate"></div>


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



Value Description
normal Default. Plays animation as normal, i.e. forward
reverse Plays animation in the reverse direction, i.e. backward
alternate Plays animation forward first, then backward
alternate-reverse Plays animation backward first, then forward
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different animation-direction values.

  .animate-example {
    width: 80px;
    height: 80px;
    background: steelblue;
    animation: movingAnimation 1s infinite;
    animation-timing-function: ease-in-out;
    animation-direction: normal;
  @keyframes movingAnimation {
    from { transform: none; }
    to { transform: translateX(300%); }

<div class="animate-example"></div>

Browser support

This table shows when animation-direction support started for each browser.

43.0 May 2015
16.0 Oct 2012
10.0 Sep 2012
30.0 Jun 2015
9.0 Sep 2015

You may also like

Last updated on Sep 30, 2023