CSS cubic-bezier() Function

The cubic-bezier function creates a smooth easing function.

This function is used by the animation-timing-function and transition-timing-function properties.

Example

#

Hover the element to see the cubic bezier function change its width.

<style>
  .transition-example {
    width: 100px;
    height: 100px;
    background: steelblue;
    transition: width 1s;
    transition-timing-function: cubic-bezier(0.3, 0.9, 0.6, 0.9);
  }

  .transition-example:hover {
    width: 400px;
  }
</style>

<div class="transition-example"></div>

Using cubic-bezier

The cubic-bezier function specifies a cubic bezier curve.

A cubic bezier is defined by four points (x1, y1, x2, y2).

The x1 and y2 are the start and end points of the curve.

This function creates an easing curve for these 2 properties:
   animation-timing-function and transition-timing-function.

Syntax

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

Values

#

Value Description
x1,y1,x2,y2 Numeric values between from 0 to 1. x1 and y2 specify the start and end of the curve. x1 and y1 represent the initial time and state, while x2 and y2 represent the final time and state.

Browser support

This table shows when cubic-bezier support started for each browser.

Chrome
4.0 Jan 2010
Firefox
4.0 Mar 2011
IE/Edge
10.0 Sep 2012
Opera
10.5 Mar 2010
Safari
3.1 Mar 2008

You may also like

Guides