HTML and CSS Reference
ALTERING THE ANIMATION RATE
Again, similar to transitions, you can set different timing functions on animations
to make the rate the animation occurs at vary from start to end. Only the property
name is different: animation-timing-function . The timing functions are all the
same. Here again is a list of the different timing functions:
linear . The animation happens at the same rate from beginning to end.
ease . The default value; the animation starts quickly and then gradually
ease-out . The animation starts quickly, stays quick for longer than ease ,
and then slows down more abruptly at the end.
ease-in . The animation starts off slowly and then speeds up toward the end.
ease-in-out . The animation starts off by accelerating, is quite fast for most
of the duration, and decelerates toward the end.
steps() . Instead of giving a smooth transition throughout, this value causes
the transition to jump between a set number of steps placed equally along
the transition. For example, steps(10) would make the transition jump
along in ten steps. You can also set an optional second parameter with a
value of start or end —for example, steps(10, start) or steps(10, end) .
This specifies whether the change in property value should happen at the
start or end of each step. You won't find much use for this optional parameter,
but it is worth a mention.
cubic-bezier() . You can use cubic-bezier() to specify your own cus-
tom cubic Bézier curve to use for the animation. This function takes four
arguments: the X and Y coordinates of the beginning control handle, and
the X and Y coordinates of the end control handle. For example, cubic-
bezier(0.25, 0.1, 0.25, 1.0) is equivalent to the ease preset value. For
more on cubic Bézier curves, see the “Cubic Bézier Curves” sidebar earlier
in the chapter.