CSS cubic-bezier() Function
Example
Transition effects with different speeds 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);
}
Definition and Usage
The 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 end points of the curve. P0 is (0,0) and represents the initial time and initial state, while P3 is (1,1) and represents the final time and final state.
From the above diagram, we need to understand the value ranges for cubic-bezier:
P0: Default value (0, 0)
P1: Dynamic value (x1, y1)
P2: Dynamic value (x2, y2)
P3: Default value (1, 1)
We need to focus on the values of P1 and P2, where the X-axis values range from 0 to 1. Values outside this range will make cubic-bezier invalid; the Y-axis values are not restricted but should not be excessively large.
The most direct interpretation is that a straight line is placed within a coordinate system of range 1, and two points are pulled from the middle (X-axis range is [0, 1], Y-axis is arbitrary), resulting in the curve that represents the animation speed curve.
cubic-bezier() can be used for the animation-timing-function and transition-timing-function properties.
Supported Versions: CSS3
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| 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, where x1 and x2 must be between 0 and 1. |