CSS animation-direction Property

The CSS animation-direction property sets how animation should be played: forwards, backwards or in alternate cycles. The default value is normal. Each time you run the animation, it will reset to the beginning state and start over.

When multiple comma-separated values are specified for any animation property, they will be attached to the animations that are defined in animation-name differently.

The animation-direction property is one of the CSS3 properties.

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

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

Example of the animation-direction property:

<!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 backwards.</p>
    <div></div>
  </body>
</html>

Example of the animation-direction property with the "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>

Example of the animation-direction property with the "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>

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

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 100px;
      height: 100px;
      background: #ccc;
      position: relative;
      animation: myfirst 5s 1;
      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>

Values

Value Description
normal It is the default value, the animation plays forwards. Each time you run the animation, it will reset to the beginning state and start over.
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.
alternate At first the animation moves forwards, then backwards.
alternate-reverse At first the animation moves backwards, then forwards.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Browser support

43.0+
4.0-42.0 -webkit-
12.0+ 16.0+
5.0-15.0 -moz-
9.0+
5.1-8.0 -webkit-
12.0+
15.0-29.0 -webkit-

Practice Your Knowledge

The CSS animation-direction property values are:



Do you find this helpful?

Related articles