Loading…
Adjust the cubic-bezier easing curve and generate a CSS transition-timing-function.
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
Tune the four control points (x1, y1, x2, y2) to build the bezier curve. Setting y below 0 or above 1 creates an overshoot effect.
It is an easing function that expresses how an animation accelerates and decelerates using four control values (two coordinate points). By setting it on transition-timing-function, you can freely tune the pacing of motion.
As you adjust the curve, a cubic-bezier(...) value is produced. Paste it directly into the transition-timing-function or animation-timing-function in your CSS.
Common, popular easings such as ease, ease-in, ease-out, and ease-in-out are provided as presets. You can start from a preset and fine-tune it to craft the motion you want.