CSS animation-direction

The animation-direction property in CSS defines whether an animation should play forward, backward, alternate between forward and backward, or alternate with a reverse starting point. This property allows you to control the flow of the animation cycle and create more complex animation effects.

Syntax of animation-direction

</>
Copy
animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;

Values

ValueDescription
normalThe animation plays in the normal forward direction. This is the default value.
reverseThe animation plays in reverse direction.
alternateThe animation alternates between playing forward and backward, starting in the forward direction.
alternate-reverseThe animation alternates between playing forward and backward, starting in the reverse direction.
initialSets the property to its default value (normal).
inheritInherits the value from the parent element.

Default Value

normal

Examples for animation-direction

Using the CSS animation-direction Property

The following examples demonstrate how the animation-direction property can be used to control the direction of an animation.

</>
Copy
/* Play animation in normal direction */
.element {
  animation-direction: normal;
}

/* Play animation in reverse direction */
.element {
  animation-direction: reverse;
}

/* Alternate between forward and backward direction */
.element {
  animation-direction: alternate;
}

/* Alternate between forward and backward, starting with reverse */
.element {
  animation-direction: alternate-reverse;
}

Example for Applying animation-direction

The following example demonstrates the use of animation-direction with different values.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
  @keyframes slide {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(100px);
    }
  }

  .normal {
    animation: slide 2s infinite;
    animation-direction: normal;
  }

  .reverse {
    animation: slide 2s infinite;
    animation-direction: reverse;
  }

  .alternate {
    animation: slide 2s infinite;
    animation-direction: alternate;
  }

  .alternate-reverse {
    animation: slide 2s infinite;
    animation-direction: alternate-reverse;
  }

  .box {
    width: 50px;
    height: 50px;
    margin: 10px;
    background-color: red;
    display: inline-block;
  }
</style>
</head>
<body>

<h1>CSS animation-direction Example</h1>

<div><div class="box normal">Normal</div></div>
<div><div class="box reverse">Reverse</div></div>
<div><div class="box alternate">Alternate</div></div>
<div><div class="box alternate-reverse">Alt Reverse</div></div>

</body>
</html>

.normal

  1. The normal value makes the animation progress in the default forward direction.
  2. The animation starts at the from keyframe and moves to the to keyframe in each cycle.
  3. For the slide animation, the box starts at its initial position (translateX(0)) and moves to translateX(100px) repeatedly.
  4. The result is a box that slides to the right and immediately resets to the starting position before repeating.

.reverse

  1. The reverse value makes the animation progress in the backward direction.
  2. The animation starts at the to keyframe and moves to the from keyframe in each cycle.
  3. For the slide animation, the box starts at translateX(100px) and moves back to translateX(0) repeatedly.
  4. The result is a box that slides to the left and resets to its end position before repeating.

.alternate

  1. The alternate value alternates the direction of the animation for each cycle.
  2. In one cycle, the animation progresses forward (from translateX(0) to translateX(100px)), and in the next cycle, it moves backward (from translateX(100px) to translateX(0)).
  3. This creates a back-and-forth motion for the animation.
  4. The result is a box that slides to the right and then slides back to the left repeatedly in a smooth transition.

.alternate-reverse

  1. The alternate-reverse value alternates the animation direction like alternate, but it starts in the reverse direction.
  2. In the first cycle, the animation progresses backward (from translateX(100px) to translateX(0)), and in the next cycle, it moves forward (from translateX(0) to translateX(100px)).
  3. This creates a similar back-and-forth motion as alternate, but with the initial direction reversed.
  4. The result is a box that slides to the left first and then slides back to the right repeatedly.

Browser Support

The animation-direction property is supported in most modern browsers. Below is a compatibility table:

BrowserBrowser Version
Chrome43
Edge10
Firefox16
Safari9
Opera30