CSS Transition Physics

Cubic Bézier CSS Animation Easing Generator

Generate parametric cubic-bezier(x1, y1, x2, y2) timing functions with interactive velocity curves, CSS transition rules, and live GPU animation previews.

Timing Function

cubic-bezier(0.25, 1, 0.5, 1)

Animation Curve

Apple Spring Ease

Acceleration Profile

Elastic Damping

GPU Frame Target

120 FPS Native

Preset Profiles

P1 X (0.0 to 1.0): 0.25

P1 Y (-1.5 to 2.5): 1.00

P2 X (0.0 to 1.0): 0.50

P2 Y (-1.5 to 2.5): 1.00

● P1 Handle • ● P2 Handle • ━ Bezier Curve

Physics Sandbox

Production Output

Mathematics of Cubic Bézier Timing Functions

A cubic Bézier curve is a parametric curve defined by four control points: (P_0(0, 0)), (P_1(x_1, y_1)), (P_2(x_2, y_2)), and (P_3(1, 1)). The position (B(t)) at time parameter (t in [0, 1]) is computed via Bernstein polynomials:

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

In CSS animations, the X-axis represents time progression and must strictly lie within ([0.0, 1.0]), while the Y-axis represents animation progression and can exceed ([0.0, 1.0]) to generate realistic elastic recoils, anticipations, and rubber-band bounce effects.

Frequently Asked Questions

Why use custom cubic-bezier over standard ease-in-out?

Standard CSS presets like ease and ease-in-out often look robotic and generic. Bespoke cubic-bezier timing functions introduce physical mass, elastic recoil, and snappy responsiveness tailored to your brand's interaction language.

Does cubic-bezier trigger browser layout repaints?

When applied to composited properties like transform and opacity, modern browsers execute the cubic-bezier evaluation directly on the GPU compositor thread, yielding silky-smooth 120 FPS performance with zero CPU layout thrashing.