Chapter 5 ■ CSS3 Keyframe animationS
It is also possible to “chain” keyframe animation sequences by introducing a delay between them, shown in
Listing 5-9 and Figure 5-3.
Listing 5-9. CSS3 Chained Animation Sequence
#box { background: red; width: 100px; height: 100px; position: absolute;
animation-name: lefttoright, toptobottom;
animation-duration: 3s, 6s;
animation-timing-function: ease-in, ease-in-out;
animation-delay: 0s, 3s;
animation-fill-mode: both;
}
6 sec.Figure 5-2. Movement of an element after changing the values of animation-duration
3 sec.
6 sec.Figure 5-3. Movement of an element after setting values for animation-delay
You’ll use combinations of all these features in the CSS3 Animation module to create complex animations
such as the bouncing ball described in the next section, and image slideshows.
Repeating Animation Sequences
Increasing the iteration count allows your animations to repeat multiple times. An animation can be set to repeat
endlessly by using the infinite keyword. For example, infinite animation could be used to create an endlessly
bouncing ball (see Figure 5-4).