HTML and CSS Reference
Figure 21-3. The animation-direction property controls the way an animation is repeated
The four squares all share the following animation properties:
The animation is set to repeat endlessly, but the squares don't move until you click a button because
applies the animated class to the square and sets its animation-name to slide . Clicking the button again, removes
the class and the animation, causing the box to jump back to its original position.
The slide keyframes are the same as in the preceding example. They simply move the element 500px across
the screen. This is how animation-direction affects the repeat pattern:
normal The square starts on the left, and moves 500px to the right. When it reaches its
destination, it jumps back to its original position, and starts moving right again.
reverse The square jumps 500px to the right, and starts moving left. When it reaches
its original position, it jumps back to the right, and starts moving left.
alternate The square starts on the left, and moves 500px to the right. When it reaches
its destination, it starts moving back in the opposite direction, and keeps moving back
and forth across the screen.
alternate-reverse The square jumps 500px to the right, and starts moving to the left.
When it reaches its original position, it starts moving to the right, and keeps moving
back and forth.
So, normal and reverse always repeat the keyframes in a single direction, but starting at different ends of the
animation. The other values for animation-direction repeat the animation in both directions. The difference
between alternate and alternate-reverse lies in where they begin the sequence. After that, they both go back
■ Opera 12.0, firefox 14, and Safari 5.1 support only normal and alternate . Safari 6 supports all four
values. firefox 16 plans to add support for reverse and alternate-reverse .