HOW IT WORKS
Read a timing curve without guessing.
A CSS cubic Bézier easing function maps time progress on its x axis to output progress on its y axis.
1. Set two control points
The endpoints are fixed at (0, 0) and (1, 1). You choose (x₁, y₁) and (x₂, y₂). Each x control must be between 0 and 1. The controls do not need to be ordered: x₁ = 1 and x₂ = 0 is a valid pair. CSS permits y controls beyond 0–1, which allows overshoot.
2. Enter the time percentage
For 25% time progress, use x = 0.25. This is a coordinate on the curve’s x axis, not necessarily the curve parameter u. The result is the y coordinate at that x.
3. Solve x, then evaluate y
For 0 ≤ u ≤ 1, the curve is:
X(u) = 3(1−u)²u x₁ + 3(1−u)u² x₂ + u³ Y(u) = 3(1−u)²u y₁ + 3(1−u)u² y₂ + u³
Bezierframe finds u such that X(u) equals the entered time fraction, then evaluates Y(u). For cubic-bezier(0, 0, 0, 1), X(u) = u³. At 12.5% time, u = 0.5 and output is 50%. Directly evaluating Y(0.125) would give 4.296875%, which answers a different question.
Why an exact comparison bracket?
Accepted decimals become scaled integers. The solver compares X(u) with the entered time using integer arithmetic, refining a parameter bracket 64 times unless it finds an exact root earlier. It evaluates Y at the rational midpoint of the final bracket. The resulting output is an approximation to the inverse-curve value when the root is not exact.
This handles flat derivatives without dividing by them. For x₁ = 1 and x₂ = 0, X′(0.5) is zero. A tiny x residual alone can hide a much larger error in u; a narrow parameter bracket avoids that stopping rule.
After 64 refinements the parameter bracket is at most 2⁻⁶⁴ wide. Under this tool’s y bounds, |Y′| ≤ 30, so midpoint output error is at most 30 × 2⁻⁶⁵ before display rounding. Text and CSV contain the actual rational midpoint, its evaluated output, the bracket and the conservative error bound. Display rounding is separate: six decimal places, half away from zero.
What this tool covers
- One cubic Bézier timing function, with time progress from 0% to 100%.
- Each x control from 0 to 1; each y control from −5 to 5; up to 12 digits after the decimal point.
- Plain decimal text, optionally starting with a minus sign. No plus sign, exponent, percent symbol, trailing decimal point, pasted CSS function or nonfinite value.
- Legal output below 0% or above 100% is preserved.
The y range and input format are software bounds, not the complete CSS grammar. CSS supports y values beyond this range and specifies tangent-based extrapolation outside the input interval; this calculator does not implement that extrapolation.
This is a numerical curve model. It does not predict actual frame times, browser pixels, computed-style serialization, keyframe composition or how a particular CSS property clamps values. It does not provide an accessibility or motion-safety verdict. There is no moving preview.
Primary references
The control and mapping rules follow the W3C CSS Easing Functions Level 1 cubic Bézier definition, corroborated by Level 2. The integer-bracket implementation and its stated bounds are Bezierframe’s numerical design, not a browser conformance claim.