CSS animation-direction Property

The animation-direction specifies the direction of the animation.

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

Example

#

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

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

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

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

Syntax

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

Values

#

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.

<style> 
  .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%); }
  }
</style>

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

Browser support

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

Chrome
43.0 May 2015
Firefox
16.0 Oct 2012
IE/Edge
10.0 Sep 2012
Opera
30.0 Jun 2015
Safari
9.0 Sep 2015

You may also like

Guides