CSS cubic-bezier() Function
The CSS cubic-bezier() function defines a Cubic Bezier curve.
A Cubic Bezier curve is defined by four points: P0, P1, P2, and P3.
P0 and P3 are the start and the end of the curve. In CSS, these points are fixed; as the coordinates are ratios. P0 is (0, 0) and represents the initial time and the initial state, P3 is (1, 1) and represents the final time and the final state.
The cubic-bezier() function can be used with the
animation-timing-function
property and the transition-timing-function property.
Example
A transition effect with variable speed from start to end:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
Try it Yourself »
More "Try it Yourself" examples below.
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
CSS Syntax
cubic-bezier(x1,y1,x2,y2)
| Value | Description |
|---|---|
| x1,y1,x2,y2 | Required. Numeric values. x1 and x2 must be a number from 0 to 1 |
| Version: | CSS3 |
|---|
More Examples
Example
Show <div> elements with different Cubic Bezier speed values:
#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2
{animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3
{animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4
{animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5
{animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
Try it Yourself »
Related Pages
CSS reference: CSS animation-timing-function property.
CSS reference: CSS transition-timing-function property.
