User Rating 0.0 ★★★★★

Total Usage 0 times

Category CSS Tools

Duration ms

Presets

P1 x

P1 y

P2 x

P2 y

Compare with linear

Custom

Linear

Tip: Select a handle on canvas, then use Arrow keys to nudge. Hold Shift for fine control.

Is this tool helpful?

Your feedback helps us improve.

★ ★ ★ ★ ★

About

CSS transitions and animations rely on timing functions to interpolate between states. The cubic-bezier(x₁, y₁, x₂, y₂) function defines a cubic Bézier curve where the x-axis represents time (clamped 0 - 1) and the y-axis represents progression. Incorrect easing choices cause interfaces to feel sluggish, robotic, or physically implausible. A bounce effect with wrong control points produces jarring motion that breaks user trust. This tool computes the exact parametric curve and outputs the CSS function string ready for production use.

The generator accepts y-values outside [0, 1] to produce overshoot and anticipation effects. Note: x-values are always clamped to [0, 1] per the CSS specification because time cannot run backward. This tool approximates visual output at 200 sample points. For production validation, always test against target frame rates on low-powered devices.

Formulas

A cubic Bézier curve is a parametric curve defined by four control points. For CSS easing, the endpoints are fixed at P₀ = (0, 0) and P₃ = (1, 1). The curve is computed as:

B(t) = (1 − t)³ ⋅ P₀ + 3(1 − t)² ⋅ t ⋅ P₁ + 3(1 − t) ⋅ t² ⋅ P₂ + t³ ⋅ P₃

where t ∈ [0, 1] is the parameter. For each component:

x(t) = 3(1 − t)² ⋅ t ⋅ x₁ + 3(1 − t) ⋅ t² ⋅ x₂ + t³

y(t) = 3(1 − t)² ⋅ t ⋅ y₁ + 3(1 − t) ⋅ t² ⋅ y₂ + t³

where x₁, y₁ are the coordinates of control point P₁ and x₂, y₂ are the coordinates of P₂. The CSS specification requires x₁, x₂ ∈ [0, 1] while y₁, y₂ may exceed this range to produce overshoot effects. To evaluate the easing at a given time fraction x, one must solve the cubic in t for the x-component using Newton-Raphson iteration, then evaluate the y-component at that t.

Reference Data

Preset Name	CSS Value	x₁	y₁	x₂	y₂	Character
linear	cubic-bezier(0, 0, 1, 1)	0	0	1	1	Constant velocity
ease	cubic-bezier(0.25, 0.1, 0.25, 1)	0.25	0.1	0.25	1	CSS default; gentle start & end
ease-in	cubic-bezier(0.42, 0, 1, 1)	0.42	0	1	1	Slow start, fast end
ease-out	cubic-bezier(0, 0, 0.58, 1)	0	0	0.58	1	Fast start, slow end
ease-in-out	cubic-bezier(0.42, 0, 0.58, 1)	0.42	0	0.58	1	Symmetric acceleration
easeInSine	cubic-bezier(0.47, 0, 0.745, 0.715)	0.47	0	0.745	0.715	Sinusoidal ease-in
easeOutCubic	cubic-bezier(0.215, 0.61, 0.355, 1)	0.215	0.61	0.355	1	Cubic deceleration
easeInOutQuart	cubic-bezier(0.77, 0, 0.175, 1)	0.77	0	0.175	1	Quartic S-curve
easeInBack	cubic-bezier(0.6, -0.28, 0.735, 0.045)	0.6	−0.28	0.735	0.045	Anticipation overshoot start
easeOutBack	cubic-bezier(0.175, 0.885, 0.32, 1.275)	0.175	0.885	0.32	1.275	Overshoot end settle
easeInOutBack	cubic-bezier(0.68, -0.55, 0.265, 1.55)	0.68	−0.55	0.265	1.55	Both-end overshoot
snappy	cubic-bezier(0.075, 0.82, 0.165, 1)	0.075	0.82	0.165	1	Quick response, smooth land
Material Standard	cubic-bezier(0.4, 0, 0.2, 1)	0.4	0	0.2	1	Google Material Design default
Material Decelerate	cubic-bezier(0, 0, 0.2, 1)	0	0	0.2	1	Entering elements
Material Accelerate	cubic-bezier(0.4, 0, 1, 1)	0.4	0	1	1	Exiting elements

Frequently Asked Questions

The x-axis represents time progression in CSS transitions. Allowing x-values outside [0, 1] would mean time running backward, which is physically meaningless for animation scheduling. The y-axis represents the output property value (opacity, position, etc.), and values beyond [0, 1] create overshoot - the element moves past its target and settles back, producing bounce or anticipation effects.

CSS keywords are predefined cubic-bezier aliases. For example, ease-in-out equals cubic-bezier(0.42, 0, 0.58, 1). The keyword form offers no parameters to tune. Using the explicit cubic-bezier() function gives precise control over the acceleration profile, letting you match specific motion design specifications from tools like After Effects or Figma.

Setting P1 = (0, 0) and P2 = (1, 1) produces a linear curve - constant velocity with no acceleration. This is identical to cubic-bezier(0, 0, 1, 1) or the linear keyword. The curve degenerates into a straight diagonal from origin to (1, 1).

A single cubic-bezier segment cannot produce multiple oscillations. It can create one overshoot (y > 1) or one anticipation dip (y < 0), but not repeated bounces. True bounce or elastic effects require CSS @keyframes with multiple steps, or JavaScript-based easing functions with damped sinusoidal terms.

At 60 fps over a 300ms transition, the browser evaluates roughly 18 frames. Rendering the preview curve with 200 sample points provides more than sufficient visual fidelity. The parametric evaluation at each sample is O(1) - four multiplications and three additions - so performance is negligible even at 1000 samples.

Yes. Aggressive easing (steep curves) on short durations (under 150ms) can feel jarring because the acceleration phase happens within 2-3 frames. For micro-interactions (100-200ms), use subtle curves like cubic-bezier(0.25, 0.1, 0.25, 1). Reserve dramatic ease-in-back or ease-out-back for durations of 300ms or longer where the overshoot is perceptible but not disorienting.