Easing presets
| Name | CSS |
|---|---|
| ease | ease = cubic-bezier(0.25, 0.1, 0.25, 1) |
| ease-in | ease-in = cubic-bezier(0.42, 0, 1, 1) |
| ease-out | ease-out = cubic-bezier(0, 0, 0.58, 1) |
| ease-in-out | ease-in-out = cubic-bezier(0.42, 0, 0.58, 1) |
| linear | linear = cubic-bezier(0, 0, 1, 1) |
| Material standard | cubic-bezier(0.2, 0, 0, 1) |
| Material emphasized decelerate | cubic-bezier(0.05, 0.7, 0.1, 1) |
| Material emphasized accelerate | cubic-bezier(0.3, 0, 0.8, 0.15) |
| easeOutQuart | cubic-bezier(0.25, 1, 0.5, 1) |
| easeInOutCubic | cubic-bezier(0.65, 0, 0.35, 1) |
| easeOutExpo | cubic-bezier(0.16, 1, 0.3, 1) |
| easeOutBack | cubic-bezier(0.34, 1.56, 0.64, 1) |
| easeInOutBack | cubic-bezier(0.68, -0.6, 0.32, 1.6) |
Using the curve
.menu {
transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), opacity 250ms ease-out;
}
@keyframes pop-in { from { transform: scale(0.9); opacity: 0; } }
.toast { animation: pop-in 300ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@media (prefers-reduced-motion: reduce) {
.menu, .toast { transition: opacity 150ms; animation: none; }
}el.animate([{ transform: 'translateY(8px)', opacity: 0 }, { transform: 'none', opacity: 1 }], {
duration: 250,
easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
});Styling the element you’re animating? Try the box shadow generator and the gradient generator.
Frequently asked questions
What do the four cubic-bezier numbers mean?
They are the x and y coordinates of two control points, P1 (x1, y1) and P2 (x2, y2). The curve always starts at (0, 0) and ends at (1, 1); x is the share of the duration that has passed and y the share of the change that has happened. The control points pull the curve towards them, setting how it accelerates and decelerates.
Why can’t x go outside 0–1 when y can?
x is time, which has to move forward, so the browser rejects x values below 0 or above 1. y is progress, which may overshoot: a y above 1 makes the animation go past its end value and come back, as in easeOutBack, and a y below 0 makes it pull back before starting.
Which easing should I use for UI animations?
Use ease-out curves (fast start, gentle stop) for things entering the screen or responding to input, such as menus, dialogs and toasts, because they feel responsive. Use ease-in (slow start) for things leaving, and ease-in-out for things moving from one place to another on screen. Keep most UI transitions between 150 and 300 ms.
Can cubic-bezier make a bounce or a spring?
Only one overshoot. A cubic Bézier has two control points, so it can go past the end once and settle back, but it can’t oscillate. For real bounces and springs, use the CSS linear() function, which takes a list of points (supported in Chrome 113+, Firefox 112+ and Safari 17.2+), or a JavaScript animation library.
Do I need to respect reduced motion?
Yes. Some people get dizzy or nauseous from motion. Wrap large movements in @media (prefers-reduced-motion: no-preference), or replace them with a simple fade when the user has asked the system to reduce motion.