ExampleDo the animation once, then do the animation backwards:
Try it yourself » |
The animation-direction property is not supported in any browsers.
Safari and Chrome support an alternative, the -webkit-animation-direction property.
The animation-direction property defines whether or not the animation should play in reverse on alternate cycles.
If the animation-direction value is "alternate", the animation will be played as normal every odd time (1,3,5,etc..) and backwards every even time (2,4,6,etc...).
Note: If the animation is set to played only once, this property will have no effect.
Default value: | normal |
---|---|
Inherited: | no |
Version: | CSS3 |
JavaScript syntax: | object.style.animationDirection="alternate" |
animation-direction: value; |
Property Value | Description |
---|---|
normal | Default value. The animation should be played as normal |
alternate | The animation should play in reverse on alternate cycles |