cubic-bezier() easing
The cubic-bezier() CSS easing function interpolates along a smooth curve, creating animations and transitions with continuous changes in speed. The ease, ease-in, ease-out, and ease-in-out keyword values are presets for common Bézier curves.
Overview
The cubic-bezier() CSS easing function interpolates along a smooth curve, creating animations and transitions with continuous changes in speed. The ease, ease-in, ease-out, and ease-in-out keyword values are presets for common Bézier curves.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 4 | 12 | 4 | 3.1 | 18 | 2 | |
| The cubic-bezier() CSS function creates a smooth transition using a cubic Bézier curve. As an easing-function, it can be used to smooth out the start and end of the interpolation. | 16 | 12 | 4 | 6 | 18 | 6 |
Syntax
.element {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
animation-timing-function: ease-in-out;
}Live demo
Use cases
Using cubic-bezier() easing
The cubic-bezier() CSS easing function interpolates along a smooth curve, creating animations and transitions with continuous changes in speed. The ease, ease-in, ease-out, and ease-in-out keyword values are presets for common Bézier curves.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features