IN-DEPTH GUIDE // CUBIC BEZIER CURVES & CSS TRANSITION TIMING
Understanding parametric Bernstein polynomials, acceleration profiles, control vector mechanics, and physical overshoot in web animations.
The Mathematics of Cubic Bezier
In CSS transitions and web animations, timing functions determine how intermediate property values are calculated between keyframes over elapsed time. Rather than linear progression, realistic physics requires variable acceleration and deceleration.
A cubic Bezier curve is defined by four anchor points: P0 (0, 0) at start-time, P3 (1, 1) at final-time, and two movable tangent control handles: P1 (x1, y1) and P2 (x2, y2). The curve equation follows third-order Bernstein polynomials:
B(t) = (1-t)³P₀ + 3(1-t)²tP₁ + 3(1-t)t²P₂ + t³P₃, where t ∈ [0, 1]
Handle Constraints & Elastic Overshoot
CSS specifications impose a strict restriction on the horizontal time axis: 0 ≤ x1, x2 ≤ 1, because time cannot flow backwards. However, the vertical progression axis has no such constraint!
- Y > 1.0 (Overshoot): The animated element travels past its final destination before snapping back into place, creating a natural mechanical bounce or rubber-band spring effect.
- Y < 0.0 (Anticipation): The element recoils slightly in reverse before rocketing forward, mimicking an athlete winding up for a jump or a sling pullback.
Frequently Asked Questions
Why can't X coordinates exceed 0 or 1?
In a browser animation engine, the X axis corresponds directly to normalized time. If X were allowed outside [0, 1] or allowed non-monotonic slopes, multiple progress states would exist for the exact same point in time, creating undefined rendering states.
How do I use this curve in Tailwind CSS?
You can define custom transition timing in Tailwind by adding an arbitrary value class such as ease-[cubic-bezier(0.19,1,0.22,1)] or by configuring theme.extend.transitionTimingFunction.
What is the difference between transition and keyframe animation?
CSS transitions interpolate between two states when triggered by user interaction (hover, active, class change). Keyframe animations run autonomously on loop, but both utilize identical cubic-bezier() timing syntax.
Is client processing 100% private?
Yes. All Bezier curve calculations, coordinate transformations, and vector drag listeners occur exclusively within your client's JavaScript runtime.