Easing Visualizer is a free online tool that lets you drag cubic-bezier control points, preview the animation, and copy the CSS for your transition — so you can feel a timing curve before you ship it.
Presets
Curve editor — drag the brass points
Current curve: cubic-bezier(0.25, 0.10, 0.25, 1.00)
Preview
Progress: 0% · time: 0.00s
Race — all presets over the same duration
CSS snippet
transition: all 1.0s cubic-bezier(0.25, 0.10, 0.25, 1.00);
How it works
P1 and P2 are the two control points of a cubic-bezier curve. Their x positions set when the motion accelerates; their y positions set how far it has travelled.
Y may exceed 0–1. A y above 1 makes the animation overshoot its target and settle back — that is what gives ease-out-back its springy feel.
Bounce is not a cubic-bezier. A true bounce needs several direction changes, which one bezier curve cannot express — use keyframes for that.