CSS Cubic Bezier
Calculate CSS Cubic Bezier instantly with the exact formula and a worked example.
CSS Cubic Bezier
x1
y1
x2
y2
Elapsed animation time%
Animation durationms
Animation progress
80.2403%
CSS
cubic-bezier(0.25, 0.1, 0.25, 1)
Time point
150ms
Progress at 25 / 50 / 75%
40.9 / 80.2 / 96%
More about: CSS Cubic Bezier
What it calculates
The “CSS Cubic Bezier” calculator computes Animation progress in % from 6 parameters: x1, y1, x2, y2, elapsed animation time (%), animation duration (ms).
Standard IT calculations for developers and sysadmins.
Example calculation
With parameters x1 = 0.25, y1 = 0.1, x2 = 0.25, y2 = 1, Elapsed animation time = 50 %, Animation duration = 300 ms the result is 80.24 %.
How to use
- Enter x1, y1, x2, y2, elapsed animation time and animation duration — each field above is adjustable with a slider.
- Animation progress (%) is calculated automatically as you type.
- Check the worked example below to see the formula applied to real numbers.
- Copy the result or bookmark this calculator.
Related calculators
FAQ
How is CSS Cubic Bezier calculated?
The CSS Cubic Bezier calculator computes Animation progress (in %) from x1, y1, x2, y2, elapsed animation time, animation duration. Enter your values above and the exact formula is applied instantly; a worked example with real numbers is shown below.
Is the CSS Cubic Bezier calculator free?
Yes. It is completely free, needs no signup, runs entirely in your browser, and sends no data to any server.
More calculators in this category
Explore related free tools