CHAPTER 2 ■ CSS3 TRAnSfoRmS And TRAnSiTionSKeyword Graph Cubic-Bezier Description
ease-in 0.42, 0, 1, 1 Slow start, acceleration climbing
to a sudden stop.
ease-out 0, 0, 0.58, 1 Instant start to animation, motion
slows down towards end.
ease-in-out 0.42, 0, 0.58, 1 Element is eased in and out
during animation: a slow, smooth
start briefly attaining a constant
velocity during the middle of the
transition before slowing to a stop.
Table 2-2. (continued)
As you can see, all easing curves have a mathematical equivalent in the form of a cubic-bezier expression: a
number pair in which each set of floating-point digits describes a point in coordinate space, forming a line that
creates a transition curve. (Note that the points at the termination of the curve on either end cannot be moved or
defined).
For an ease-in-out curve, the points look like Figure 2-10.