CSS cubic-bezier() Function

div {
  transition-timing-function: cubic-bezier(0.1, 0.3, 0.5, 0.1);
}

Meaning

The cubic-bezier() css function notation defines a cubic Bézier curve.

As these curves are continuous, they are often used to smooth down the start and end of the interpolation and are therefore sometimes called easing functions.

A cubic Bézier curve is defined by four points P0, P1, P2, and P3. P0 and P3 are the start and the end of the curve and, in CSS these points are fixed as the coordinates are ratios (the abscissa the ratio of time, the ordinate the ratio of the output range). P0 is (0, 0) and represents the initial time or position and the initial state, P3 is (1, 1) and represents the final time or position and the final state.

Number values representing the abscissas, and ordinates of the P1 and P2 points defining the cubic Bézier curve. x1 and x2 must be in the range [0, 1] or the value is invalid.

Version: CSS3

Standard Syntax

cubic-bezier(x1, y1, x2, y2)

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Status

Function Arguments

The following table describes the arguments of this function.