CSS workflow
CSS easing: control points, overshoot and reduced motion
An easing curve changes how an animation progresses during its duration. Use the curve editor to compare a movement, then check the actual distance, trigger and user preferences in your interface.
Content updated: · Maintainer and corrections
Read time and progress separately
cubic-bezier(x1, y1, x2, y2) has fixed endpoints at (0, 0) and (1, 1). The two control points bend the curve; they are not points the animation necessarily passes through. Horizontal position is elapsed-time progress and vertical position is output progress, not speed or a physical motion path.
Both x coordinates must be between 0 and 1. CSS permits y coordinates outside that interval. The editor accepts finite numeric coordinates, including decimal and exponent notation, with a display limit of −10 to 10 for y. An editor-range error does not mean the CSS specification forbids that value.
Compare one change at a time
Start with ease, ease-in, ease-out or ease-in-out. Keep distance and duration equal while comparing with linear. A curve that feels right for a short button movement may feel uncomfortable across a full screen. Duration and distance remain design decisions, not properties that a timing curve can validate.
The editor previews a single forward transform using the browser's native animation engine. It does not play automatically after an edit. The copied transition rule includes your chosen duration; the bare curve also works in animation-timing-function, where easing can apply separately between keyframes. Test that context instead of assuming it is the same as this preview.
Understand overshoot before using it
For example, cubic-bezier(0.34, 1.56, 0.64, 1) can move past the destination before settling. A control point outside 0–1 makes overshoot possible, but does not guarantee that the curve itself leaves the interval. The plot shows the whole curve; very strong motion can temporarily leave the bounded preview area.
Different CSS properties handle out-of-range interpolated values differently. A transform can visibly overshoot while a property such as opacity has a bounded range. A single cubic curve is also not a multi-bounce spring simulation. Choose the actual animated property and verify it in the receiving browser.
Give people control over motion
Respect prefers-reduced-motion in the interface that uses your CSS. Non-essential movement should be removable without hiding content or breaking the interaction. The example below removes a decorative transition while preserving the final state; it is not a universal policy for every animation.
The editor starts with a static graph. When reduced motion is enabled, animated playback additionally requires an explicit opt-in, and a stop control remains available. Keyboard users can edit the four labelled fields or focus a handle and use arrow keys. These affordances help operate this tool; they do not certify the accessibility of the interface where you paste the CSS.
.card {
transition: transform 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
@media (prefers-reduced-motion: reduce) {
.card { transition: none; }
}Data provenance