The animation-direction specifies the direction of the animation.
Possible values are forward, backward, and alternate (back and forth).
An element with animation-direction set to alternate.
The animation moves back and forth.
<style>
.animate {
width: 80px;
height: 80px;
background: steelblue;
animation: alternateAnimation 1s infinite;
animation-direction: alternate;
}
@keyframes alternateAnimation {
from { transform: none; }
to { transform: translateX(250%); }
}
</style>
<div class="animate"></div>
animation-direction: normal | reverse | alternate |
alternate-reverse | initial | inherit;
| Value | Description |
|---|---|
| normal | Default. Plays animation as normal, i.e. forward |
| reverse | Plays animation in the reverse direction, i.e. backward |
| alternate | Plays animation forward first, then backward |
| alternate-reverse | Plays animation backward first, then forward |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different animation-direction values.
<style>
.animate-example {
width: 80px;
height: 80px;
background: steelblue;
animation: movingAnimation 1s infinite;
animation-timing-function: ease-in-out;
animation-direction: normal;
}
@keyframes movingAnimation {
from { transform: none; }
to { transform: translateX(300%); }
}
</style>
<div class="animate-example"></div>
This table shows when animation-direction support started for each browser.
 Chrome
|
43.0 | May 2015 |
 Firefox
|
16.0 | Oct 2012 |
 IE/Edge
|
10.0 | Sep 2012 |
 Opera
|
30.0 | Jun 2015 |
 Safari
|
9.0 | Sep 2015 |
