CSS cubic-bezier() Function

❮ Previous Functions Next ❯


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


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.


Function Arguments

The following table describes the arguments of this function.

Argument Description
x1, y1, x2, y2 Required. Specifies the numeric values. x1 and x2 must be a number from 0 to 1.
❮ Previous Functions Next ❯