Tools · CSS · Cubic-bezier easing generator · Guides
Cubic-bezier easing generator guides
Three short reads: why this matters, how to do it, and one specific way to use it.
Why Easing Matters More Than Duration in UI Animation
Two transitions with the same duration can feel quick or sluggish depending only on their timing curve. What a cubic-bezier curve actually describes, and why the right one makes an interface feel responsive.
Read the guideHow to Create a Custom cubic-bezier() Easing Curve for CSS
Start from a preset, drag the two handles, compare the motion against linear and ease at the duration you will really use, and copy both the value and a ready transition line. The steps, with the limits the tool really has.
Read the guideAn Overshoot Menu Animation With ease-out-back, and Its Two Bugs
An ease-out-back curve makes a dropdown pop open and settle. It also makes the menu overshoot on the way closed, does nothing on opacity, and can poke out of a clipped container. The whole job, with the fixes.
Read the guide