CSS cubic-bezier()

CSS cubic-bezier(): the easing function that controls every animation

The cubic-bezier() timing function shapes how a CSS animation or transition progresses over time. Use it as the easing in any animatable property: transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) or as animation-timing-function. The four numbers define the two control points of a cubic Bézier curve plotted from (0,0) to (1,1) — the X axis is time, the Y axis is progress.

Syntax and the four parameters

cubic-bezier(P1x, P1y, P2x, P2y):

• X values must be between 0 and 1. A value outside this range is invalid.
• Y values can exceed 0-1 — Y > 1 creates overshoot (bounce), Y < 0 creates anticipation (back-easing).
• The implicit endpoints are P0 = (0,0) and P3 = (1,1) — start and finish are fixed.

Built-in keywords and what they really mean

linear        →  cubic-bezier(0,    0,    1,    1)
ease  (default) →  cubic-bezier(0.25, 0.1,  0.25, 1)
ease-in       →  cubic-bezier(0.42, 0,    1,    1)
ease-out      →  cubic-bezier(0,    0,    0.58, 1)
ease-in-out   →  cubic-bezier(0.42, 0,    0.58, 1)

Material Design standard easing is cubic-bezier(0.4, 0, 0.2, 1); decelerate is cubic-bezier(0, 0, 0.2, 1); accelerate is cubic-bezier(0.4, 0, 1, 1). The catalog at easings.net ports the classic Robert Penner easings (Quad, Cubic, Quint, Expo, Back, Elastic, Bounce) to ready-to-paste CSS values.

Overshoot, anticipation and bounce

Setting P2y > 1 — for example cubic-bezier(0.34, 1.56, 0.64, 1) — sends the curve past 100% before settling, producing the classic "back easeOut" bounce that designers love for buttons and modals. Setting P1y < 0 creates anticipation, where the element pulls back before launching. Pure spring physics aren't possible in plain CSS — for that use libraries like Framer Motion or the new linear() function (Chrome 113+, Firefox 112+) which accepts a list of pseudo-keyframes: linear(0, 0.5 25%, 1).

Practical recommendations

• ease-out for UI elements entering — they decelerate naturally into place.
• ease-in for elements exiting — they accelerate out of view.
• ease-in-out for transitions inside the page that need symmetry.
• Avoid linear for most UI — it feels mechanical (it has its uses: progress bars, marquees, looping spinners).
• Use steps(N, end) when you want stepped sprite-frame animations instead of smooth interpolation.

The classic visual editor is cubic-bezier.com by Lea Verou — drag the control points and see the curve animate live.

FAQ

Can I make a real bounce with cubic-bezier? Partially — set Y > 1 to overshoot once. Multi-bounce springs need either the modern CSS linear() function with several pseudo-keyframes, or JS libraries like Framer Motion / GSAP that drive the animation frame by frame.

What's the difference between cubic-bezier and steps()? cubic-bezier produces a smooth interpolation between start and end. steps(N, end) jumps in N discrete frames — perfect for sprite sheets, typewriter effects and stop-motion looks.

When should I use ease-out vs ease-in? Use ease-out for elements arriving (toasts, dropdowns) — fast in, slow to settle. Use ease-in for elements leaving the viewport — gentle start, fast disappearance.

Does the JS Web Animations API accept cubic-bezier? Yes — pass it as the easing option in element.animate(keyframes, { duration, easing: 'cubic-bezier(0.4,0,0.2,1)' }). Same syntax, same behaviour as CSS.