BlogsDope image BlogsDope

CSS animation-direction

March 20, 2021 CSS ANIMATION 1863

The animation-direction property is used to specify whether an animation plays forwards, backwards or a combination of the two.

CSS

animation-direction: value;

Animations in CSS allow you to change the state of an element. While the animation-direction property is used to specify the direction of animations, there are other animation properties as well like animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-fill-mode and animation-play-state.

See the Pen CSS animation-direction example by Aakhya Singh (@aakhya) on CodePen.

Click on the RERUN button in the above demo to see the animation from beginning.

Note: For animations to be effective, it is necessary to define the animation-duration property because the duration of animations is zero by default.

Values

normal : The animation plays in forward direction (as usual).

reverse : The animation plays in reverse direction.

alternate : The animation plays first in forward and then in backward direction.

alternate-reverse : The animation plays first in backward and then in forward direction.

initial : Sets the default value of the property.

inherit : Inherits the value from parent element.

Examples

In the following example, an animation named "merry-go-round" is defined using @keyframes which rotates an object by 360 degrees clockwise along the Z-axis. When this animation is applied to images, the duration of one animation cycle is set to 2 seconds and the iteration count of the animation cycles is set to infinite.

Look at the effect of different animation-direction values on the animations. The prefix -webkit- is used for better browser support.

See the Pen CSS animation-direction example by Aakhya Singh (@aakhya) on CodePen.

Click on the RERUN button in the above demo to see the animation from beginning.

Look at another example in which the direction of an animation applied to a div is set to alternate.

See the Pen CSS animation-direction example by Aakhya Singh (@aakhya) on CodePen.

Click on the RERUN button in the above demo to see the animation from beginning.

Browser Support

This property is supported in all the major browsers.


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).