Understanding timing functions

When you declare a transition, the properties, durations, and delays are relatively simple to understand. However, understanding what each timing function does can be a little trickier. Just what do ease, linear, ease-in, ease-out, ease-in-out, and cubic-bezier actually do? Each of them is actually a predefined cubic-bezier curve, essentially the same as an easing function. Or, more simplistically, a mathematical description of how the transition should look. It's generally easier to visualize these curves, so I recommend you head over to http://cubic-bezier.com/ or http://easings.net.

Both these sites let you compare timing functions and see the difference each one makes. Here is a screenshot of http://easings.net—on the website you can hover over each line for a demonstration of the easing function:

Figure 9.3: Easings.net provides a handy visualization of a number of different timing functions

However, even...