CSS animation-direction Property
The CSS animation-direction property sets how an animation should be played: forwards, backwards, or in alternate cycles. The default value is normal.
When multiple comma-separated values are specified for any animation property, they are applied in order to the corresponding animations defined in animation-name.
The animation-direction property is one of the CSS3 properties.
| Initial Value | normal |
|---|---|
| Applies to | All elements, It also applies to ::before and ::after pseudo-elements. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.animationDirection = "reverse" |
Syntax
Syntax of CSS animation-direction Property
css
animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;Example of the animation-direction property:
Example of CSS animation-direction Property with normal value
html
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: #ccc;
position: relative;
animation: myfirst 5s 1;
animation-direction: normal;
}
@keyframes myfirst {
0% {
background: #8DC3CF;
left: 0px;
top: 0px;
}
25% {
background: #1c87c9;
left: 200px;
top: 0px;
}
50% {
background: #030E10;
left: 200px;
top: 200px;
}
75% {
background: #666;
left: 0px;
top: 200px;
}
100% {
background: #8ebf42;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<h2>Animation-direction example</h2>
<p>Here the animation plays forwards.</p>
<div></div>
</body>
</html>Example of the animation-direction property with the "reverse" value:
Example of CSS animation-direction Property with reverse value
html
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #ccc;
position: relative;
animation: myfirst 5s 1;
animation-direction: reverse;
}
@keyframes myfirst {
0% {
background: #8DC3CF;
left: 0px;
top: 0px;
}
25% {
background: #1c87c9;
left: 200px;
top: 0px;
}
50% {
background: #030E10;
left: 200px;
top: 200px;
}
75% {
background: #666;
left: 0px;
top: 200px;
}
100% {
background: #8ebf42;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<h2>Animation-direction example</h2>
<p>In this example the animation plays as reverse.</p>
<div></div>
</body>
</html>Example of the animation-direction property with the "alternate" value:
Example of CSS animation-direction Property with alternate value
html
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #ccc;
position: relative;
animation: myfirst 5s 2;
animation-direction: alternate;
}
@keyframes myfirst {
0% {
background: #8DC3CF;
left: 0px;
top: 0px;
}
25% {
background: #1c87c9;
left: 200px;
top: 0px;
}
50% {
background: #030E10;
left: 200px;
top: 200px;
}
75% {
background: #666;
left: 0px;
top: 200px;
}
100% {
background: #8ebf42;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<h2>Animation-direction example</h2>
<p>Here the animation plays first forwards, then backwards.</p>
<div></div>
</body>
</html>Example of the animation-direction property with the "alternate-reverse" value:
Example of CSS animation-direction Property with alternate-reverse value
html
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #ccc;
position: relative;
animation: myfirst 5s 2;
animation-direction: alternate-reverse;
}
@keyframes myfirst {
0% {
background: #8DC3CF;
left: 0px;
top: 0px;
}
25% {
background: #1c87c9;
left: 200px;
top: 0px;
}
50% {
background: #030E10;
left: 200px;
top: 200px;
}
75% {
background: #666;
left: 0px;
top: 200px;
}
100% {
background: #8ebf42;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<h2>Animation-direction example</h2>
<p>Here the animation plays backwards, then forwards.</p>
<div></div>
</body>
</html>Values
| Value | Description | Play it |
|---|---|---|
| normal | It is the default value, the animation plays forwards. | Play it » |
| reverse | The animation plays backwards. Each time you run the animation, it will reset to the end and start over. Timing function is also reversed. | Play it » |
| alternate | At first the animation moves forwards, then backwards. Requires animation-iteration-count ≥ 2 to be visible. | Play it » |
| alternate-reverse | At first the animation moves backwards, then forwards. Requires animation-iteration-count ≥ 2 to be visible. | Play it » |
| initial | Sets the property to its default value. | |
| inherit | Inherits the property from its parent element. |
Practice
What are the possible values for the CSS Animation-direction property?