CSS animation-animation-direction property defines whether or not the animation should play in reverse on some or all cycles. When an animation is played in reverse the timing functions are also reversed. For example, when played in reverse an ease-in animation would appear to be an ease-out animation.
In case animation-name has multiple values, animation-direction can also have multiple values.
CSS property animation-direction
| CSS version: | CSS 3 |
| Value: | [normal | reverse | alternate | alternate-reverse] [, ...]* |
| Initial: | normal |
| Applies to: | all elements, ::before and ::after pseudo-elements |
| Inherited: | no |
animation-direction values
| normal | All iterations of the animation are played as specified |
| reverse | Play animationiterations in reverse direction |
| alternate | Odd counts in normal direction, even count in reverse direction. |
| alternate-reverse | Odd counts in reverse direction, even count in normal direction. |
Example – animation-direction
In the following code, CSS property animation-direction can be changed to the following values
- normal
- reverse
- alternate
- alternate-reverse
<style>
@keyframes left-to-right {
0% {left:0;}
100% {left:200px;}
}
.box {
position: fixed;
background-color:lightgreen;
animation-name: left-to-right;
animation-duration: 4s;
animation-iteration-count:infinite;
animation-direction: normal;
}
</style>
<div class=box>Object</div>animation-direction refresh
