free tools runs in this tab no account, no upload
cubic-bezier, sampled
What does this cubic-bezier actually do in the middle?
The four control points, and where the animation really is at a quarter, a half and three quarters through. A curve that spends 70% of its time in the last 10% of the distance is a curve that reads as broken.
transition: transform 240ms cubic-bezier(0.2, 0, 0, 1);
- 25% of 240ms 60.72% of the distance
- 50% of 240ms 87.78% of the distance
- 75% of 240ms 97.55% of the distance
how to use it
- Type the four control points, or paste the ones from your stylesheet.
- Read the sampled positions: a good ease-out is past halfway by a third of the time.
- Copy the declaration with the duration you want.
what this page cannot do
The extension reads the timing functions a page already runs and can slow every one of them down at once, which is how you see the easing rather than compute it.
Animation in the panel What is animating on this page, and what is it costing?
no host permissions · the reading is free