When the animation iterates, you can use the animation-direction property with the value alternate to make every other iteration play the animation backwards. For example, in a bouncing ball animation, you could provide keyframes for the falling ball, and then use animation-direction: alternate; to reverse it on every second play through.
-webkit-animation-direction: alternate;

The default is normal, so the animation will play forwards on each iteration. When animations are played in reverse, timing functions are also reversed; for example,ease-in becomes ease-out.
Related Tutorial
Follow Us #