HTML and CSS Reference
In-Depth Information
Figure 21-3.
The animation-direction property controls the way an animation is repeated
The four squares all share the following animation properties:
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
The animation is set to repeat endlessly, but the squares don't move until you click a button because
animation-name
hasn't been set. Clicking the play button alongside a square triggers a JavaScript function that
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
and forth.
■
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
.
Note