Transitions and Animations 179
animation-iteration-count
Unlike a transition, which only happens once (or twice, if you want to count
the reverse), an animation can be repeated any number of times. The num-
ber of repetitions is set by the animation-iteration-count property, which has
this syntax:
E { animation-iteration-count: count; }
The count value in this syntax is either a whole number or the key-
word infinite. A number value sets how many times the animation repeats.
The default value is 1 (one), meaning the animation plays from start to end
once and then stops. The infinite value means the animation loops indefi-
nitely or at least until another condition is met that changes this value.
A value of 0 (zero) or any negative number prevents the animation from
playing.
To continue with the example I’ve built throughout this section, if I want
the animation to repeat 10 times, I need to add the following declaration:
div { animation-iteration-count: 10; }
animation-direction
Animations play from start to finish, but they can also play in reverse.
You can set whether your animation always plays in one direction or alter-
nates playing forward and backward. To do this, use the animation-direction
property:
E { animation-direction: keyword; }
The keyword value has two options: normal or alternate. The default
is normal, which always plays the animation forward: The animation plays
through from start to finish, and then, if it is set to repeat, it plays again
from the start. If the alternate value is used, the animation plays from start
to finish and then plays in reverse before starting over again. If you con-
sider each iteration of the animation as a “cycle,” the odd-numbered cycles
play forward and the even-numbered play backward. You can see the differ-
ence in Figure 14-7.
To complete the example animation, let’s set the animation to alternate
forward and backward:
div { animation-direction: alternate; }
