The CSS animation-direction Property, Explained

CSS makes it possible to not only create animations, but to control their duration, speed, start time, direction, and more. 

The CSS animation-direction property makes it easy to control how your animations behave. For example, let’s say you want your animation to move left to right, or right to left, or back and forth.

Let’s walk through how you can define this property to control the direction of an animation below.

CSS Animation-Direction Values

CSS Shorthand For Animation-Direction

CSS Animation-Direction Infinite

Direct Your CSS Animations

What is CSS animation-direction? 

The syntax of the CSS animation-direction property is:

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

To ensure your animation works correctly and moves in the direction you want, you have to define the animation name and duration properties as well.

CSS Animation-Direction Values

There are multiple possible values for the CSS animation-direction property. The most common are normal, reverse, alternate, and alternate-reverse. The property also accepts the global values initial and inherit. Let’s define each below.

Normal

If you use the normal value, the animation will play forwards. Meaning, for every animation cycle, the animation will reset to the beginning state.

Normal is the default value of the animation-direction property in CSS. So if you don’t set this property, then it will play forwards by default.

See the Pen by Christina Perricone (@hubspot) on CodePen.

In the example above, the animation starts at 0, moves 100px to the right, then resets at 0 and repeats.

Reverse

If you use the reverse value, the animation will play backwards. Meaning, for every animation cycle, the animation will reset to the end state.

With this value, not only are the animation steps performed backwards — the timing functions are also reversed. An ease-in timing function becomes ease-out, for example.

See the Pen by Christina Perricone (@hubspot) on CodePen.

In the example above, the animation starts at 100px to the right, moves to the left until it’s at 0, then resets at 100px and repeats.

Alternate

If you’d like the animation to reverse direction every cycle, you can use the alternate value. With this value, the animation will play forwards first, then backwards.

See the Pen by Christina Perricone (@hubspot) on CodePen.

In the example above, the animation starts at 0px, moves 100px to the right, moves back to 0, and back to the right. There’s no resetting so the loop is continuous for two cycles.

Alternate-reverse

If you use the alternate-reverse value, the animation will also reverse direction every cycle. It will play backwards first, then forwards.

See the Pen by Christina Perricone (@hubspot) on CodePen.

In the example above, the animation starts at 100px to the right, moves 100px to the left, moves back to 100, and back to the left. There’s no resetting so the loop is continuous for two cycles.

Initial

The initial value sets the value of the animation-direction property to its default: normal.

Inherit

If the inherit value is specified, the animation-direction property will inherit the value of its parent element.

CSS Shorthand for animation-direction

Using the animation shorthand CSS property, you can also set all animation properties, including animation-direction, at once. This will require you to write less code and make your codebase look cleaner overall. For example, the animation name, duration, iteration-count, timing, and direction are defined in the same line of code below:

 
animation: MyDiv 10s 5 ease alternate;

Here's an example using the shorthand above.

See the Pen by Christina Perricone (@hubspot) on CodePen.

CSS Animation-Direction Infinite

Using the animation-direction and animation-iteration-count property, you can set the animation to move forwards, backwards, or alternate direction for a specific number of animation cycles — or infinitely.

The example below demonstrates each of the CSS animation-direction values when set to repeat infinitely. It also  uses the animation shorthand property.

See the Pen Infinite by Christina Perricone (@hubspot) on CodePen.

Direct Your CSS Animations

With CSS, you can control the direction of your animations. It’s as easy as adding another line of CSS, or another value when using the animation shorthand property. You have extensive control over your animations so you can decide what’s best for your website design.