Understanding Timing Functions
Remember in algebra when the teacher had you graph equations and you
wondered if you’d ever have to use that for anything?The transition-timing-function property describes how transitions happen over time
in relation to the duration of the animation. We specify this timing function
using a cubic Bézier curve, which is defined by four control points on a graph.
Each point has an x-axis value and a y-axis value, from 0 to 1. The first and
last control points are usually set to (0.0, 0.0) and (1.0, 1.0), and the two
middle points determine the shape of the curve. This is how we define accel-
eration curves for animations, and if you’ve done animation before, you may
have heard the term easing.Several built-in easing functions are defined in the specification:
- linear
- ease-in
- ease-out
- ease-in-out
- ease
If you want the animation to be a constant speed, you’d use linear. If you want
the animation to start slow and speed up, you’d use ease-in. If you want it to
start slow, speed up, and end slow, you’d use ease-out.Each of these functions defines a cubic Bézier curve, and while they may be
good enough for many cases, knowing how they work will make it possible
for you to define your own with the cubic-bezier function, which you do by
defining the four points on a graph. Let’s look at a few of these functions.A linear curve has its control points set to the two end points, which creates
a straight line at a 45-degree angle. The four points for a linear curve are
( (0.0, 0.0), (0.0,0.0), (1.0, 1.0), (1.0, 1.0) ), and it looks like this:A more complex curve, with points ( (0.0, 0.0), (0.42,0.0), (1.0, 1.0), (1.0, 1.0) ),
called an ease-in curve, looks like this:Chapter 8. Eye Candy • 170
Download from Wow! eBook <www.wowebook.com> report erratum • discuss