cubic-bezier custom easing
Go beyond ease-in and ease-out — design your own timing curves.
Quick implementation
/* Snappy entrance — slow start, fast end */
.ease-snap {
animation-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
}
/* Overshoot — bounces past the target, then settles */
.ease-overshoot {
animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Sluggish — slow start and slow end, fast middle */
.ease-sluggish {
animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
.ease-snap, .ease-overshoot, .ease-sluggish {
animation: none;
}
}Prompt this to your LLM
Includes role, constraints, and edge cases to handle.
You are a senior frontend engineer tuning animation feel.
Goal: Create custom easing curves using cubic-bezier() for CSS animations and transitions.
Technical constraints:
- cubic-bezier(x1, y1, x2, y2) takes four values between 0 and 1 for x, unbounded for y.
- y values > 1 or < 0 create overshoot effects (element goes past the target).
- Common useful curves:
- Snap: cubic-bezier(0.5, 0, 0.1, 1) — slow start, fast arrival
- Overshoot: cubic-bezier(0.34, 1.56, 0.64, 1) — bounces past, then settles
- Material Design standard: cubic-bezier(0.4, 0, 0.2, 1)
- Include prefers-reduced-motion to disable or simplify animations.
Edge cases:
- Overshoot curves can cause elements to temporarily leave their container — use overflow: hidden if needed.
- x values must be between 0 and 1; y values can exceed this range.
- Test with both short (150ms) and long (500ms) durations — curves feel very different at different speeds.Why this matters in 2026
The built-in keywords — ease, ease-in, ease-out — are fine defaults, but custom cubic-bezier curves are what separate a polished UI from a generic one. Material Design, Apple's HIG, and every major design system define their own easing curves. A snappy cubic-bezier(0.5, 0, 0.1, 1) on a dropdown or a playful overshoot on a modal entrance completely changes how an interface feels.
The logic
cubic-bezier(x1, y1, x2, y2) defines a Bezier curve with two control points. The x-axis represents time (0 = start, 1 = end) and the y-axis represents progress (0 = initial state, 1 = final state). When y values exceed 1, the animation overshoots — the property goes past its target before settling back. When y values go below 0, it undershoots first. The x values must stay between 0 and 1 (you can't go back in time), but y values are unbounded.
Accessibility & performance
Custom easing doesn't add any performance cost beyond the animation itself — the browser evaluates the curve mathematically. The prefers-reduced-motion query should disable or simplify animations regardless of easing. For motion-sensitive users, overshoot curves can feel more jarring than linear ones, so they're especially important to disable. Use tools like cubic-bezier.com to visualize and experiment with curves.