CSS easing-curve editor with animation preview. Free, private, runs in your browser.
100% private — your files never leave your browser. All processing happens locally on your device.
transition-timing-function: cubic-bezier(0, 0, 0.25, 1);
A CSS transition tells an element to change over time — but *how* it changes is controlled by an easing function. Linear moves at constant speed (feels robotic). Ease-in starts slow and accelerates (feels like something winding up). Ease-out starts fast and decelerates (feels like something arriving and settling — the most UI-friendly). Ease-in-out does both. Beyond these keywords, `cubic-bezier(x1, y1, x2, y2)` lets you design any curve — including overshoots that briefly exceed the target before settling.
A cubic-bezier curve passes through (0, 0) and (1, 1) by definition — time starts at 0 and progress ends at 1. The two middle control points you can drag shape the path between them. P1 (x1, y1) is the 'influence near the start' — pull it right and up for a more aggressive start. P2 (x2, y2) is the 'influence near the end' — pull it left and down for a snappier finish. The X axis must stay in [0, 1] (time moves forward); the Y axis is unbounded, which is how overshoots work (values above 1 or below 0 mean the animation goes past its target).
For most UI transitions, reach for `ease-out` or a stronger variant like `cubic-bezier(0, 0, 0.25, 1)`. This feels snappy on enter, natural on arrival. For sequential reveals (modals, dropdowns opening), use an `out-cubic` or `out-quart` — these decelerate more aggressively. For departures (modals closing), match with an `in-cubic`. For playful interactions, try `out-back` (small overshoot) — but never on anything critical like form submissions. Avoid `in-out` variants unless the animation is long enough (>500ms) to feel the curve change direction.
The play button animates a dot using your current curve over the chosen duration. 250ms feels instant, 400-600ms feels deliberate, 800-1200ms feels cinematic. Most UI animations live in the 200-400ms range; hero reveals and onboarding live in the 600-1000ms range. If an animation feels slow, shorten the duration before you change the curve — a well-shaped 200ms curve beats a linear 400ms every time.
Bezier solving happens in your browser via Newton-Raphson iteration — no network calls, no analytics on the curve you design. Copy the `transition-timing-function: cubic-bezier(...)` output into your CSS, Tailwind config, or animation library. The curve math is exact — what you preview is what your browser will render.
A cubic-bezier is a parametric curve defined by two control points. CSS `transition-timing-function: cubic-bezier(x1, y1, x2, y2)` controls how a value changes over time — linear (straight), eased (curved), or overshooting (curves going outside [0,1]).
The five CSS keywords (ease, linear, ease-in, ease-out, ease-in-out) cover 80% of cases. Reach for a custom cubic-bezier when you want something punchier — `ease-out` with a higher start (e.g., `0, 0, 0.25, 1`) feels snappier. Overshoots (`0.175, 0.885, 0.32, 1.275`) add playful bounce.
Play animates a dot using your current curve over the chosen duration — it's how the curve *feels* at real speeds. 250ms is the 'snappy UI' range; 600ms is the 'deliberate transition' range; 1500ms+ is for hero animations.
When you click a preset, your previous curve is parked as a dashed comparison. Toggle compare on to see both at once — great for A/B-ing 'ease-out-cubic vs ease-out-quart' without losing either.