CSS TIMING PLAYGROUND
CSS BEZIER CURVE PLAYGROUND
Drag the purple P1 and teal P2 handles on the canvas, use the sliders, or pick a preset. Simulate the animation and copy the CSS output.
PRESETS
SLIDERS
P1 Control Point
X10.25
Y10.10
P2 Control Point
X20.25
Y21.00
DRAG CANVASGrab the glowing circles
P0 (0,0) — startP3 (1,1) — end
CSS OUTPUT
/* Timing function */
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
/* Shorthand */
transition: all 2s cubic-bezier(0.25, 0.1, 0.25, 1);CURRENT:cubic-bezier(0.25, 0.1, 0.25, 1)
PHYSICS SIM2s duration
Your curve (ease)
Compare:
ease
Live Values
X10.25
Y10.10
X20.25
Y21.00
Both bars animate simultaneously
● P1 = arm from start (0,0)● P2 = arm from end (1,1)X values: 0–1 onlyY values: can exceed 0–1 for bounce/overshoot