The cubic-bezier function creates a smooth easing function.
This function is used by the animation-timing-function and transition-timing-function properties.
Hover the element to see the cubic bezier function change its width.
<style>
.transition-example {
width: 100px;
height: 100px;
background: steelblue;
transition: width 1s;
transition-timing-function: cubic-bezier(0.3, 0.9, 0.6, 0.9);
}
.transition-example:hover {
width: 400px;
}
</style>
<div class="transition-example"></div>
The cubic-bezier function specifies a cubic bezier curve.
A cubic bezier is defined by four points (x1, y1, x2, y2).
The x1 and y2 are the start and end points of the curve.
This function creates an easing curve for these 2 properties:
animation-timing-function and transition-timing-function.
cubic-bezier(x1,y1,x2,y2);
| Value | Description |
|---|---|
x1,y1,x2,y2 |
Numeric values between from 0 to 1. x1 and y2 specify the start and end of the curve. x1 and y1 represent the initial time and state, while x2 and y2 represent the final time and state. |
This table shows when cubic-bezier support started for each browser.
 Chrome
|
4.0 | Jan 2010 |
 Firefox
|
4.0 | Mar 2011 |
 IE/Edge
|
10.0 | Sep 2012 |
 Opera
|
10.5 | Mar 2010 |
 Safari
|
3.1 | Mar 2008 |
