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.