CSS Master

Figure 5.6. A graph of cubic-bezier(0.42, 0, 1, 1)

Inmostcases,it’seasiertouseatimingfunctionkeyword.Wementionedstep-

startandstep-endintheprevioussection,buttherearefivemorekeywords,each

ofwhichisanaliasforcubic-beziervalues.They’relistedinTable5.3.

Table 5.3. Timing function keywords and their function equivalents

Keyword Equivalent function Effect

Begins slowly, accelerates quickly, then slows

towards the end of the transition

cubic-bezier(0.25, 0.1,

0.25, 1)

ease

Begins quickly, then accelerates slowly but

steadily until the end of the transition

cubic-bezier(0.42, 0, 1,

1)

ease-in

Accelerates quickly but slows towards the end

of the transition

cubic-bezier(0, 0, 0.58,

1)

ease-out

Begins slowly, accelerates quickly, then

decelerates towards the end of the transition

cubic-bezier(0.42, 0,

0.58, 1)

ease-in-out

Speed remains consistent over the course of

the animation

linear cubic-bezier(0, 0, 1, 1)

202 CSS Master