CSS Cubic Bezier Generator

An easing function controls how an animation speeds up and slows down. In CSS (and in the Web Animations API, and in many game engines) it is written as cubic-bezier(x1, y1, x2, y2): a curve from (0, 0) to (1, 1) whose two handles shape the motion. This generator gives you the CSS keywords, the popular easings.net curves (easeOutCubic, easeInOutQuart, easeOutBack…) or your own handles, plots the curve, animates a ball with it and lists the progress at every 10% of the duration.

How to use this tool

1. Pick a preset, or choose Custom and type x1, y1, x2, y2.
2. Set the duration and the property you animate.
3. Watch the ball in the preview and read the progress table.
4. Copy the transition, animation or JavaScript snippet.

Formula

x(u) = 3(1−u)²u·x1 + 3(1−u)u²·x2 + u³ · y(u) = 3(1−u)²u·y1 + 3(1−u)u²·y2 + u³

For a time fraction t, the generator solves x(u) = t for the curve parameter u (Newton–Raphson with a bisection fallback) and reports y(u) as the progress. x1 and x2 must lie between 0 and 1; y values outside 0–1 overshoot.

Example

The keyword ease is cubic-bezier(0.25, 0.1, 0.25, 1): halfway through the duration the element has already covered 80.24% of the distance, which is why ease feels fast then gentle. ease-in (0.42, 0, 1, 1) has done only 31.54% by then. easeOutBack overshoots: at half time it is at 108.74% before settling back.