Pro CSS3 Animation

Chapter 5 ■ CSS3 Keyframe animationS

Blending and Chaining Keyframe Animations

Merging multiple keyframe animations is very similar to merging transitions, as shown in Listing 5-7.

Listing 5-7. Blending multiple keyframe animations on one element

@keyframes lefttoright {
0% { left: 0; }
100% { left: 800px; }
}

@keyframes toptobottom {
0% { top: 0; }
25% { top: 100px; }
50% { top: 0; }
75% { top: 100px; }
100% { top: 0; }
}

#box { background: red; width: 100px; height: 100px; position: absolute;
animation-name: lefttoright, toptobottom;
animation-duration: 4s, 2s;
animation-timing-function: ease-in, ease-in-out;
}

The plotted result of combining these two animation sequences is shown in Figure 5-1.

3 sec.

6 sec.

Figure 5-1. A merged CSS3 animation

This animation can be changed by keeping the same keyframes but altering their duration, as shown in
Listing 5-8.

Listing 5-8. A Merged CSS3 Animation Altered by Changing the Keyframe Durations

#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-fill-mode: both;
}

The result is diagrammed in Figure 5-2.