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.
snippet
-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.
