Did you know Chrome Dev Tools has a cubic-bezier editor? Me neither.

In case 'cubic-bezier' is a new term to you - cubic-bezier is one of possible keywords you can use when defining a CSS transition or animation timing function. For example:

transition-timing-function: linear;
transition-timing-function: ease-in;
transition-timing-function: cubic-bezier(n,n,n,n);

animation-timing-function: linear;
animation-timing-function: ease-in;
animation-timing-function: cubic-bezier(n,n,n,n);

Each of the values above (linear, ease-in, and cubic-bezier()) control the timing of the transition or animation. The first, linear results in a constant transition/animation speed from start to finish.

The second, ease-in results in a transition/animation speed that starts slow and speeds up as it finishes.

And the third, cubic-bezier, accepts 4 parameters allowing complete control of the timing function to give nearly infinite options. Related, the other keywords, linear and ease-in, correspond to specific cubic-bezier functions - cubic-bezier(0.0, 0.0, 1.0, 1.0) and cubic-bezier(0.42, 0.0, 1.0, 1.0) respectively.

The thing about cubic-bezier functions is they're really hard to visualize. It's possible, but if you're a casual cubic-bezier user like myself it's not something worth memorizing.

Thankfully there are a number of websites to aid in creating the desired cubic-bezier curve.

And now, there's one more tool you're probably already using - Chrome Dev Tools. That's right, you can view and edit the cubic-bezier timing function directly within Chrome Dev Tools. Here's how.

Chrome's Cubic-bezier editor

To use the editor, first we need an element with a transition or animition timing function. I've created a simple CodePen as an example.

If you Inspect the .box element in Chrome Inspector > Elements tab, then visit the Style tab you'll see an icon next to the animation-timing-function property. Like this:

Clicking the icon will bring up the cubic-bezier editor, allowing you to select from predefined cubic-bezier curves, or drag the curves to create your own timing function.

Using the tool you can tweak the cubic-bezier function to you're liking, copy the output and use it within your code.