Custom Cubic-Bezier Easing Curves for CSS Transitions

Understanding Cubic-Bezier Easing

The cubic-bezier() function lets you define a custom easing curve for CSS transitions using four control points. This gives you complete control over how the animation accelerates and decelerates.

Syntax

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

The four values define two control points of a cubic Bezier curve:

• (x1, y1) — the first control point
• (x2, y2) — the second control point
• x values must be between 0 and 1
• y values can be outside 0–1 for overshoot/bounce effects

Preset Equivalents

Keyword	Cubic-bezier
linear	cubic-bezier(0, 0, 1, 1)
ease	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)

Popular Custom Curves

Overshoot (bouncy exit):

transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

The y2 value of 1.56 causes the element to overshoot the target and snap back.

Smooth deceleration:

transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);

A popular curve for page transitions and modal entrances — fast start, very gentle stop.

Spring-like:

transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);

Negative y1 pulls back initially, then overshoots and settles — simulating a spring.