CHAPTER 2 ■ CSS3 TRAnSfoRmS And TRAnSiTionS
Expressed in CSS, Figure 2-10 looks like this:transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
Understanding the cubic-bezier function allows you to create an almost infinite variety of custom easing
curves for your CSS animations. It is even possible to give the points negative values or values greater than 1 to
create extreme easing curves, which you can see in Figure 2-11.
Figure 2-11. Bezier curve with negative and greater-than-1 values, creating a “push-pull” animation effect
Figure 2-10. Bezier curve for an ease-in-out animation effect