Animation Direction

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

CSS3 animation-direction Property


Do the animation once, then do the animation backwards:

div {
    -webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */
    animation-direction: alternate;


Definition and Usage

The animation-direction property defines whether an animation should play in reverse direction or in alternate cycles.

CSS Syntax

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;