HTML5 and CSS3, Second Edition

This time, only the second point has changed, which is what causes the

bottom-left part of the line to curve. Thus, the animation starts out slow, and

then speeds up till the end.

Compare that to theease-out curve, which defines an animation that starts

out constant and slows down at the end, using a curve that looks like this:

The points for this curve would be ( (0.0, 0.0), (0.0,0.0), (0.58, 1.0), (1.0, 1.0) ).

The ease-in-out curve has a curve at the bottom and at the top, like this:

The points for this curve are ( (0.0, 0.0), (0.42,0.0), (0.58, 1.0), (1.0, 1.0) ),

and the animation will speed up at the start and slow down at the end.

The ease curve is similar to the ease-in-out curve, but the animation starts

slightly faster than it ends.

If you provide the four control points to the cubic-bezier() function, you can

define your own timing function:

report erratum • discuss

Making Things Move with Transitions and Animations • 171

Download from Wow! eBook <www.wowebook.com>