Understanding CSS cubic-bezier

One of the most often overlooked features of CSS transitions is the ability to specify a cubic-bezier timing function. This is because you get a bunch of easing options out of the standards-based box: ease, ease-in, ease-out, ease-in-out, linear.

These canned presets are alright, but if you want your animations to be the best they can be, you need to understand cubic-bezier. How an animation eases is a good way to set tone, and even distinguish a brand.  If you don't animate intuitively your product won't "feel" right. Think about how Apple adds polish to their products by meticulously choosing how their animations look.

One reason I think cubic-bezier is overlooked is because it's unintuitive at first glance. Digging into the documentation you see that it takes four parameters:

cubic-bezier(P1x,P1y,P2x,P2y)

Great... what do these do? Well, these map to points, and these points are part of a Bézier curve:

So there are 4 points, but the function only mentions P1, and P2 with their corresponding X and Y values?

For CSS Bézier Curves, P0 and P3 are always in the same spot. P0 is at (0,0) and P3 is at (1,1). An important thing to note is that the points that get passed in the cubic-bezier function can only be between 0 and 1. So if you decide to try something like cubic-bezier(2,3,5,2), you'll be banished to linear easing, the worst of all easing functions. That's like a font-family falling back to Comic Sans.

Also notice that the x-axis is the time the animation takes, and the y-axis is the property being changed. Based on the graph above you can visualize it easing quickly in the beginning, slowing down in the middle, and picking up speed at the end.

I'm a visual-spatial kinda guy, so I needed to make a tool so I could see these curves in action. So world, say hello to the cubic-bezier builder.