tools.junyo.dev

cubic-bezier UI transitions CSS

Cubic-bezier for UI transitions: how to create animations that feel natural

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.

Continue in the tool

Open full tool

More pages for this tool

Easing fundamentals for UX

  • Real physics is `ease-out` — objects have inertia and decelerate when stopping. For elements leaving the screen, `ease-in` makes more sense (accelerates when departing). `ease-in-out` is for state transitions with no clear in/out (accordions, progress bars). `linear` is for loops and loading states where constant rhythm communicates progress.
  • Duration and easing are inseparable. An aggressive `ease-out` at 600ms feels heavy. The same easing at 200ms feels agile. General rule: immediate feedback actions (hover, focus) work well at 100–200ms; element entries work well at 200–350ms; exits can be slightly faster (150–250ms).

Easing presets by use context

Modal entering (soft ease-out)

Input
Elemento entrando do centro com fade + scale
Expected output
transition: opacity 220ms cubic-bezier(0,0,0.2,1), transform 220ms cubic-bezier(0,0,0.2,1);

Material Standard Motion. Quick response with smooth deceleration.

Accordion (ease-in-out)

Input
height ou max-height animado
Expected output
transition: max-height 300ms cubic-bezier(0.4,0,0.2,1);

Symmetric state transition. Ideal for content opening and closing.

Full tool FAQ

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 control points of a cubic curve.

Frequently asked questions

What cubic-bezier does Material Design use?

MD3 uses three main easings: Standard `cubic-bezier(0.2,0,0,1)`, Emphasized `cubic-bezier(0.2,0,0,1)` (with different durations), and Decelerated `cubic-bezier(0,0,0,1)` for entries. Linear is used for progress waves.

Do spring animations need cubic-bezier?

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.