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 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
You can also set all animation properties, including animation-direction, at once using the animation shorthand CSS property. 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:
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.
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.
Originally published Sep 2, 2021 7:00:00 AM, updated September 02 2021