HTML and CSS Reference
In-Depth Information
animation-iteration-count: 1.5;
animation-direction: alternate;
animation-fill-mode: forwards;
}
The animation properties apply the
slide
keyframes to the box, set the duration to two seconds, and the
timing function to
linear
. As a result, the box takes two seconds to travel
500px
across the screen at a steady
pace. The value of
animation-iteration-count
is set to
1.5
, so the animation continues running after the first
iteration. The next two properties,
animation-direction
and
animation-fill-mode
, are described in detail
later, but they have the effect of sending the box back in the opposite direction and fixing it in position when the
animation ends. Because the number of iterations is
1.5
, the box comes to a halt in the middle of its journey back
to its original position (see Figure
21-2
).
Figure 21-2.
The animation stops halfway through the second iteration
■
Chrome 21 doesn't support partial cycles. it stops the animation at the end of the first iteration. Hopefully,
this bug will have been fixed by the time you read this.
Note
Specifying Whether the Animation Should Run in Reverse
The
animation-direction
property controls whether the animation runs in reverse on some or all cycles. This
takes as its value one of the following keywords:
normal
The is the default. All iterations of the animation run in the order defined by
the
@keyframes
rule.
reverse
All iterations run in the reverse order from that defined in the
@keyframes
rule.
alternate
Counting from 1, all odd cycles run in the normal direction, and all even
ones in reverse.
alternate-reverse
Counting from 1, all odd cycles run in reverse, and all even ones
run in the normal direction.
To see how they work, load animation-direction.html into a browser, and click the play button alongside
each value to toggle the animation on and off (see Figure
21-3
).
