CSS cubic-bezier() Function

Definition and Usage

CSS cubic-bezier() Functions are used to define cubic bezier curves.

The cubic bezier curve is defined by four points P0, P1, P2, and P3. In CSS, P0 and P3 are the start and end points of the curve, and the coordinates of these points are fixed ratios. P0 is (0, 0), representing the initial time and initial state; P3 is (1, 1), representing the final time and final state.

cubic-bezier() Functions can be used with animation-timing-function Properties and transition-timing-function Properties used together.

Instance

Example 1

A transition effect with changing 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

Example 2

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

CSS Syntax

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

Technical Details

Browser Support

The numbers in the table indicate the browser version that first fully supports this function.

Related Pages

Reference:CSS animation-timing-function Property

Reference:CSS transition-timing-function property