Drag the handles to shape a CSS easing curve. Live preview, copy the cubic-bezier() value.
It is a way to define a custom easing curve for transitions and animations. The four numbers are the coordinates of two control handles; they shape how speed changes over the duration. Drag the handles here to design the curve visually.
Drag a handle below 0 or above 1 on the vertical axis. That makes the curve overshoot, producing an elastic or bounce feel. The built-in 'bounce' preset is a starting point.
Use it as the timing function in any CSS transition or animation, for example: transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);