CSS cubic Bézier examples
An easing curve controls how far a transition has moved at each moment. Compare several curves with the same duration to see how each one starts, accelerates, and settles.
Compare curves in the easing editor →Settle an entering panel
Try cubic-bezier(0.16, 1, 0.3, 1) for a small panel entering the viewport. The panel moves most of the distance early, then slows as it reaches its resting position. Preview it over the actual travel distance and test it with longer content.
Dismiss a chip
Try cubic-bezier(0.42, 0, 1, 1), the CSS ease-in preset, for a chip leaving a list. It starts gently and accelerates away. Keep the exit short enough that people can act on the updated list promptly.
Move a tab indicator
Try cubic-bezier(0.42, 0, 0.58, 1), the ease-in-out preset, for an indicator moving between tabs. It starts and ends more gently than it moves through the middle. Change the selected tab’s label and accessible state immediately when the user acts.
Read all four coordinates
In cubic-bezier(x1, y1, x2, y2), x is elapsed progress and y is output progress. The x coordinates must stay between 0 and 1. A y coordinate can be outside that interval, allowing the output to run past a start or end value. Try an overshoot against a transform and then compare it with a curve that stays within the endpoints.
See the W3C definition of cubic Bézier easing.
Keep the state change accessible
Honor the device’s reduced-motion setting for decorative movement. Preserve visible state changes such as the panel appearing and the selected tab receiving its underline. The media query below removes the decorative transform transition when reduced motion is requested.
.tab-indicator {
transition: transform 220ms cubic-bezier(0.42, 0, 0.58, 1);
}
@media (prefers-reduced-motion: reduce) {
.tab-indicator {
transition: none;
}
}