cubic-bezier easing
The curve, as a table you can actually read.
Examples temporarily replace the input and settings. You can restore your previous work.
- curve
- 0
Enter four numbers, such as 0.42, 0, 0.58, 1, or choose a preset.
Your files stay on your device
This tool runs entirely in your browser. What you paste is processed on your device and is never sent to a server, so it is safe to use with tokens, keys and unpublished text.
Example
Example: a 300 ms slide-in menu with ease-out, ease-in-out and ease-out-back
A mobile navigation drawer, 320 px wide, slides in from the left over 300 ms, and the question is which curve makes it feel quick without arriving with a jolt. The three named curves are compared with Over set to 300 ms, reading the progress column of each table.
- ease-out, cubic-bezier(0, 0, 0.58, 1): 16.1 % of the way after 30 ms and 68.5 % at half time, then it settles over the last third.
- ease-in-out, cubic-bezier(0.42, 0, 0.58, 1): 2.0 % after 30 ms and 8.2 % after 60 ms, so the drawer seems to hesitate before it moves.
- ease-out-back, cubic-bezier(0.175, 0.885, 0.32, 1.275): past 100 % by 120 ms, 108.6 % at 180 ms, then back to 100 %; the result is flagged as overshooting.
| Time | ease-out | ease-in-out | ease-out-back |
|---|---|---|---|
| 30 ms | 16.1 % | 2.0 % | 44.8 % |
| 60 ms | 30.8 % | 8.2 % | 74.7 % |
| 90 ms | 44.5 % | 18.7 % | 92.2 % |
| 120 ms | 57.1 % | 33.2 % | 101.9 % |
| 150 ms | 68.5 % | 50.0 % | 106.8 % |
| 180 ms | 78.5 % | 66.8 % | 108.6 % |
| 210 ms | 87.0 % | 81.3 % | 108.3 % |
| 240 ms | 93.8 % | 91.8 % | 106.6 % |
| 270 ms | 98.3 % | 98.0 % | 103.7 % |
| 300 ms | 100.0 % | 100.0 % | 100.0 % |
ease-out for the drawer: it moves from the first frame and has no bump at the end. ease-out-back would carry the 320 px drawer about 27 px past its edge before pulling it back, fine for a small toast, too much for a menu. The line to copy: transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
How it works
- Pick a named curve, or type four numbers.
- Read the table: how far through the movement is at each tenth of the time.
- Set the duration to the one you are actually animating over, so the milliseconds mean something.
- Copy the timing function.
Frequently asked questions
- Why print a table instead of drawing the curve?
- Because the question is almost always “is it too slow at the start” or “does it arrive too abruptly”, and a table of progress against time answers that directly. A drawn curve looks nice and still has to be read off by eye.
- What do the four numbers mean?
- Two control points: x1, y1, x2, y2. The x values are time and must be between 0 and 1. The y values are progress and may go outside it — that is exactly what makes a curve overshoot and spring back.
- Which should I use?
- For something entering the screen, ease-out: fast at first, settling at the end. For something leaving, ease-in. ease-in-out for a move between two places. Linear for a spinner and almost nothing else.
- What is a back curve?
- One that overshoots past its destination and comes back — the small bounce that makes a dialog feel physical. Use it on small, fast movements; on a big one it reads as a mistake.
- Is ease the same as ease-in-out?
- No. ease is cubic-bezier(0.25, 0.1, 0.25, 1): it starts faster and finishes more gently than ease-in-out, cubic-bezier(0.42, 0, 0.58, 1), which is symmetrical. Over 300 ms, ease is at 29.5 % after 60 ms, where ease-in-out is at 8.2 %. Four typed numbers that match a keyword are named in the output.
- Where does the curve go in CSS or JavaScript?
- The output gives two lines: transition-timing-function for a transition, and animation-timing-function for an animation made with @keyframes. The same cubic-bezier(…) text also works as the easing option of the Web Animations API, element.animate().
- Is anything sent to a server?
- No. It runs in your browser, so what you type stays on your computer.