Front-End Web Development: The Big Nerd Ranch Guide

Custom Timing Functions

Now, for some icing on your Ottergram cake: You can create custom timing functions for your transitions instead of being limited to the built-in ones.

Timing functions can be graphed to show the transition’s progress over time. Graphs of the built-in timing functions (from the site cubic-bezier.com) are shown in Figure 7.19.

Figure 7.19  Built-in timing functions

The shapes in these graphs are known as cubic Bezier curves. The lines in the graphs describe the behavior of the animation over time. They are defined by four points. You can create custom transitions by specifying the four points ...