CSS cubic-bezier() function

It is an inbuilt function in CSS that defines a Cubic Bezier curve. The Bezier curve is the mathematically defined curve used in 2D graphical applications such as (inkspace, adobe illustrator, etc.). This CSS function is the transition timing function, which is used for the smooth and custom transitions.

It is defined by the four points (that are P0, P1, P2, and P3). The points P0 and P3 (called as anchors) are the starting and the ending points, and the points P1 and P2 (called as handles) are the middle points.

For CSS Bezier curves, the points P0 and P3 are always in the same spot. P0 is at (0,0) that represents the initial state and initial time, and P3 is at (1,1), which represents the final state and the final time. This means that the parameters passed to the cubic-bezier() function can only be between 0 and 1.

Syntax

This CSS function accepts four mandatory numeric values. The value of x1 and x2 must be lies between 0 and 1, or the value will be invalid. If we pass the parameters that are not in this interval, the function will set to its default i.e., the linear transition that has the value cubic-bezier(0, 0, 1, 1).

We can understand this CSS function by using the following illustration.

Example

This function can be used with animation-timing-function and transition-timing-function property.

Here, we are using the transition-timing-function property.

Output