Using Chrome's Cubic Bezier Editor
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.