◈Free
Cubic Bézier easing sampler
Sample CSS easing progress at quarter-duration intervals.
Sample CSS easing progress at quarter-duration intervals. Inspect easing progress at 0%, 25%, 50%, 75% and 100% of elapsed time. Binary search finds the curve parameter for each time before the vertical progress is evaluated.
How to use
- Enter your text, values, or image.
- Adjust the options and run the tool.
- Copy or download your result.
Worked example
Example input
x1: 0 y1: 0 x2: 1 y2: 1
Example result
[
{
"time": 0,
"progress": 0
},
{
"time": 0.25,
"progress": 0.25
},
{
"time": 0.5,
"progress": 0.5
},
{
"time": 0.75,
"progress": 0.75
},
{
"time": 1,
"progress": 1
}
]Limitations and details
This returns five numeric samples, not an animation preview; y control points can overshoot the normal zero-to-one progress range.
Inputs and options
- x1
- Number · Minimum: 0 · Maximum: 1
- y1
- Number · Minimum: -5 · Maximum: 5
- x2
- Number · Minimum: 0 · Maximum: 1
- y2
- Number · Minimum: -5 · Maximum: 5
Frequently asked questions
Is this tool free and private?
Yes. All 300 tools are free in this phase. Processing happens in your browser; your input and files are not sent to our servers.