Design custom cubic-bezier easing curves with comparison previews against standard easings.
Easing Curve Editor defines how animation progress changes over normalized time using the two control points of a cubic Bezier curve. It presents the custom curve alongside standard easing choices so differences in acceleration, deceleration, and overshoot can be judged visually. The graph is a timing map, not a motion path: its horizontal axis represents elapsed-time progress, while its vertical axis represents output progress. Changing the curve does not change the animation's duration or the geometric route followed by an element.
A concrete input and expected output from the current implementation.
Input
x1 = 0.42, y1 = 0, x2 = 1, y2 = 1
Expected output
cubic-bezier(0.42, 0, 1, 1), which matches the CSS ease-in keyword
These values place the two variable control points at (0.42, 0) and (1, 1). CSS defines ease-in as this exact cubic-bezier function, so its comparison curve should coincide with the custom curve.
A CSS cubic Bezier easing has fixed endpoints at (0, 0) and (1, 1). The editor changes the intermediate points (x1, y1) and (x2, y2), then expresses them as cubic-bezier(x1, y1, x2, y2). For a valid CSS easing function, both x coordinates must remain between 0 and 1 inclusive; the y coordinates may extend outside that interval.
For each elapsed-time position on the horizontal axis, the curve determines a corresponding progress value on the vertical axis. A steep section advances the animated value quickly, while a shallow section advances it slowly. Comparing the custom trace with a standard easing reveals differences in pacing even when both curves begin at zero progress and finish at full progress.
Yes, provided both control-point x values are within the valid 0 to 1 range. The cubic-bezier(...) value can be used where CSS accepts an easing function, including transition-timing-function and animation-timing-function. It controls pacing only; duration, delay, animated properties, and keyframes must still be defined separately.
No. Y values outside the usual 0 to 1 progress range can produce undershoot or overshoot, but they do not alter elapsed duration. Whether that excursion is visibly meaningful depends on the animated property's interpolation and surrounding styles. The animation still reaches the curve's fixed endpoint at normalized time 1.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.