The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

170 Chapter 14

table 14-2: Comparing transition-timing-function

Keywords with Their Equivalent Cubic Bézier Values

Keyword Value Cubic Bézier Value

ease 0. 25, 0 .1, 0 .25, 1

linear 0, 0, 1, 1

ease-in 0 .42, 0, 1, 1

ease-out 0, 0, 0 .58, 1

ease-in-out 0 .42, 0, 0 .58, 1

As with the transformation matrices I introduced in Chapter 13,

cubic-bezier() functions can be quite daunting if you’re not used to math.

But don’t worry—you can always use the keyword values, which will be

more than sufficient in most cases.

A great tool to make cubic Bézier curves a little easier is Lea Verou’s

http://cubic-bezier.com/. This tool allows you to create your own curves using

a visual interface, see them run in real time compared to the keyword

aliases, and export them as cubic-bezier() functions—a really useful aid

to understanding.

The steps() Function

An alternative to smooth, eased transitions is to use the steps() function,

which runs the animation in a series of staggered intervals. The syntax of

the function looks like this:

E { transition-timing-function: steps(count, direction); }

The count value is an integer that states how many intervals the ani-

mation should run through, and the optional direction is one of two key-

words—start or end (the default)—that sets the point at which the change

happens in each interval. That probably doesn’t make a lot of sense right

now, but bear with me.

Let’s see a very simple example of how the steps() works. Take a look

at the following rule, in which the steps() function has a step count argu-

ment of 4 and uses the simple form of the function by omitting the optional

direction keyword:

E { transition-timing-function: steps(4); }

Visualized on the timing function grid used for the cubic-bezier() func-

tion, it would look like Figure 14-2. So rather than a single line of transition,

steps are like seeing snapshots of the animation in action.