How to Use This Tool
Invert the curve's x coordinate and report eased progress rather than treating parameter u as time. Convert CSS cubic-bezier control points and a time fraction into eased progress using deterministic bisection of the x curve.
The decision this tool supports
Plugging the time fraction directly into y(u) is wrong for most easing curves because the Bézier parameter is not the CSS animation time coordinate. This page keeps the decision bounded to eased progress and the supporting outputs shown beside it. Cubic Bezier Sample does not import an account, infer a market rate, or silently substitute an industry average.
Inputs and units
The calculator uses CSS cubic-bezier control points x1, y1, x2 and y2 plus a normalized time fraction. The x controls and time stay between 0 and 1; y controls may be any finite number, including values outside that range to model overshoot. All five values are unitless.
- Control point x1 is entered in 0 to 1.
- Control point y1 may be any finite number; values outside 0–1 create overshoot.
- Control point x2 is entered in 0 to 1.
- Control point y2 may be any finite number; values outside 0–1 create overshoot.
- Time fraction is entered in 0 to 1.
Formula and worked check
Solve cubic x(u) = requested time by bisection, then evaluate y(u); CSS restricts x control points to [0,1] so the timing curve is invertible. For ease cubic-bezier(0.25, 0.1, 0.25, 1) at time 0.5, bisection finds u about 0.70 and eased progress about 80.2%. The Cubic Bezier Sample default is an executable known-answer case, not a benchmark or recommendation. Change one input and verify that the direction of eased progress still matches the stated relationship.
How to interpret the result
Positive progress-minus-time means the sampled animation is ahead of linear progress at that instant; negative means it is behind. The solved parameter u and reconstructed x value show how the requested time maps onto the curve before its y value becomes the eased progress.
Assumptions
- x1 and x2 follow the CSS [0,1] requirement.
- Time fraction is normalized from zero to one.
- Sixty bisection iterations exceed display precision.
Save the four control points and time fraction if you need to reproduce a result later.
Limitations and safety boundary
It samples one ideal timing function and does not model frame cadence, animation composition, steps(), spring motion or browser rendering delays. Cubic Bezier Sample is an estimate and cannot replace a contract, local code, licensed professional, calibrated measurement, lender statement or platform report where one governs the decision.
Source and privacy
The Cubic Bezier Sample definition or rule was checked against W3C CSS Transforms Module Level 1 on 2026-08-26. Recheck W3C CSS Transforms Module Level 1 when a specification or policy behind Cubic Bezier Sample can change. Cubic Bezier Sample arithmetic runs in this browser tab; ecech does not receive the values through a calculation API.
Sources & assumptions
Tool Spec v2 · verified 2026-08-26. Platform rules and fees can change; the editable inputs remain authoritative for your account.
Official references
- W3C CSS Transforms Module Level 1 (checked 2026-08-26)
Model assumptions
- x1 and x2 follow the CSS [0,1] requirement.
- Time fraction is normalized from zero to one.
- Sixty bisection iterations exceed display precision.
- It samples one ideal timing function and does not model frame cadence, animation composition, steps(), spring motion or browser rendering delays.
