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.
What is CSS animation-direction?
What’s the CSS animation-direction property?
The animation-direction property defines the direction of the animation. You can set it so the animation plays forwards, backwards, or alternates direction every animation cycle.
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.
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.
In the example above, the animation starts at 0, moves 100px to the right, then resets at 0 and repeats.
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.
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.
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.
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.
If you use the alternate-reverse value, the animation will also reverse direction every cycle. It will play backwards first, then forwards.
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.
The initial value sets the value of the animation-direction property to its default: normal.
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.
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.
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.