CHAPTER 2 ■ CSS3 TRAnSfoRmS And TRAnSiTionSIn CSS, Figure 2-11 looks like this:
transition: all 2000ms cubic-bezier(0.280, -0.315, 0.685, 1.390);
The use of such values creates animations with a “spring” or “bounce” to them, also known as push-pull
animations. I will explore the uses of such animations in Chapter 4.
■Tip Ceaser (http://matthewlein.com/ceaser/), and Cubic (http://cssglue.com/cubic) are excellent tools
for generating CSS easing code from graphically manipulated cubic-bezier curves. Both include a testing service to
allow you to see the visual result of changes. Peter Beverloo’s resource (http://peter.sh/experiments/css3-
transition-timing-functions/) is also useful, especially in visualizing the step function.
Animating in Steps
It’s also possible to animate an element in steps, rather than as a smooth transition. (Think of the sudden,
incremental motion of the second hand on a clock). These are created through the steps function and variants.
Here I’ll economize the code by showing just the CSS3 code for standard properties, Firefox and Webkit.
Let’s say that you have an h1 you want to animate on mouseover (see Listing 2-20).
Listing 2-20. Transition Sequence in Steps for a Heading
The code in Listing 2-20 will animate all h1 elements in a series of three “jumps” over four seconds after a
two-second delay, with no visible motion between each step. Other variations are possible, as shown in Table 2-3.