HTML and CSS Reference
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.
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
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 ).