CSS · easing
Cubic-bezier studio.
Drag the two control handles to design an easing curve, watch a sample element animate to it in real time, and copy the CSS.
Motion preview
800ms
Control points
P1 (pink)
P2 (teal)
Presets
transition-timing-function: cubic-bezier(0.42, 0.00, 0.58, 1.00);