CSS3 animation-direction Property
Do the animation once, then do the animation backwards:
-webkit-animation-direction:alternate; /* Safari and Chrome */
Try it yourself »
The animation-direction property is supported in Internet Explorer 10, Firefox, and Opera.
Safari and Chrome support an alternative, the -webkit-animation-direction property.
Note: The animation-direction property is not supported in Internet Explorer 9 and earlier versions.
Definition and Usage
The animation-direction property defines whether or not the animation should play in reverse on alternate cycles.
Note: If the animation is set to play only once, this property will have no effect.
|Animatable:||no. Read about animatable|
|normal||Default value. The animation should be played as normal||Play it »|
|reverse||The animation should play in reverse direction||Play it »|
|alternate||The animation will be played as normal every odd time (1,3,5,etc..) and in reverse direction every even time (2,4,6,etc...)||Play it »|
|alternate-reverse||The animation will be played in reverse direction every odd time (1,3,5,etc..) and in a normal direction every even time (2,4,6,etc...)||Play it »|
|initial||Sets this property to its default value. Read about initial|
|inherit||Inherits this property from its parent element. Read about inherit|
CSS3 tutorial: CSS3 Animations
Thank You For Helping Us!
Your message has been sent to W3Schools.