cubic-bezier UI transitions CSS
The `cubic-bezier()` function is the mechanism that defines how a CSS property changes over time. The choice of easing separates animations that feel like "old software" from those that feel natural and responsive. `ease-out` (starts fast, decelerates) is most recommended for elements entering the screen, because real objects decelerate when stopping.
Immediate response that eases off smoothly near the end. A good match for elements appearing on screen.
An almost symmetric, fast curve. Used in micro-interactions where feedback needs to feel instant.
Symmetric state transition. Ideal for opening and closing content without favoring entry or exit.
It's a mathematical function that defines how a CSS animation accelerates and decelerates over time. The four parameters (x1, y1, x2, y2) describe the two control points of a cubic Bézier curve, while the start (0,0) and end (1,1) are fixed. The shape of the curve between those points is what gives the movement its personality.
`cubic-bezier(0.2, 0, 0, 1)`. It is a curve with fast deceleration at the start and a smooth finish, close to the standard curve used across Material Design 3 components. Notice both Y control points sit at 0 and 1, with no overshoot, unlike spring curves.
Not necessarily. Real springs require JavaScript (framer-motion, react-spring) because physical overshoot is difficult to represent in pure cubic-bezier. But a convincing approximation is possible with Y values beyond 1.
Technically yes, but the result usually feels less natural. Since X and Y are tied to the same four points, a curve tuned to decelerate on entry (`ease-out`) accelerates oddly when reused as-is for exit. The recommended pattern is to switch to `ease-in` (or mirror the points) for exit transitions.
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);CSS is generated locally in your browser.