CSS animation-direction Property

CSS animation-direction property specifies in which direction the animation should play.

By default, the animation is played in the forward direction. But using the animation-direction property, we can easily change it to ‘reverse’, or ‘alternate’, etc. See the example below:


  animation-direction: reverse;
  animation-direction: alternate;

CSS Syntax

The animation-direction property has the following syntax:

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

Property Values

The animation-direction property accepts the following values:

normalThe animation is played normally in the forward direction. This is the default value.
reverseThe animation is played in the reverse direction.
alternateThe animation is first played in the forward direction and then in the reverse.
alternate-reverseThe animation is first played in the reverse direction and then in the forward.
initialSets the animation-direction property to its default value(normal).
inheritInherits the animation-direction property from the parent element.

General Info

Default Valuenormal
JavaScript Usageelement.style.animationDirection = “alternate”


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment