What does it do?
It is a visual editor for CSS easing curves. Drag the two control points of cubic-bezier() or type their values, start from presets (the CSS keywords, the easings.net curves and Material's), and press Play to compare the motion with a linear animation.
Copy the result for transition-timing-function or animation-timing-function. When the curve matches a CSS keyword, the keyword is used: cubic-bezier(0.25, 0.1, 0.25, 1) is simply ease.
Example
cubic-bezier(0.34, 1.56, 0.64, 1) (easeOutBack) overshoots the target a little and settles, a playful effect for menus and toasts.
Frequently asked questions
›What do the four numbers mean?
They are the coordinates of two control points, P1 (x1, y1) and P2 (x2, y2). The x axis is time and the y axis is progress; the curve always starts at (0, 0) and ends at (1, 1).
›Why can y go below 0 or above 1?
Values outside 0–1 make the animation overshoot: it goes past the end and comes back (easeOutBack) or pulls back before starting (easeInBack). x must stay between 0 and 1 because time cannot go backwards.
›Which easing should I use?
Elements entering the screen usually feel best with ease-out (fast start, gentle stop), elements leaving with ease-in, and elements moving on screen with ease-in-out. Keep UI transitions between 150 and 300ms.