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 (
cubic-bezier()) control the timing of the
animation. The first,
linear results in a constant transition/animation speed from start to finish.
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,
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.
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
animition timing function. I've created a simple CodePen as an example.
.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.