cubic-bezier() easing
The <easing-function> CSS data type represents a mathematical function that describes the rate at which a value changes.
This transition between two values may be applied in different situations. It may be used to describe how fast values change during animations. This lets you vary the animation's speed over the course of its duration. You can specify an easing function for CSS transition and animation properties.
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 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.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 <easing-function> CSS data type represents a mathematical function that describes the rate at which a value changes.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.