The CSS animation-direction Property, Explained

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

For example, let’s say you want your animation to move left to right, or right to left, or back and forth. You can do so using the CSS animation-direction property.

让我们穿过如何定义这个改过的y to control the direction of an animation below.

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 Penby Christina Perricone (@hubspot) onCodePen.

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 Penby Christina Perricone (@hubspot) onCodePen.

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 Penby Christina Perricone (@hubspot) onCodePen.

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 Penby Christina Perricone (@hubspot) onCodePen.

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

你也可以设置所有动画属性,including animation-direction, at once using the animationshorthand 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:

animation: MyDiv 10s 5 ease alternate;

Here's an example using the shorthand above.

See the Penby Christina Perricone (@hubspot) onCodePen.

CSS Animation-Direction Infinite

Using the animation-direction andanimation-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 PenInfiniteby Christina Perricone (@hubspot) onCodePen.

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.