Cubic-bezier() - Function CSS

The cubic-bezier() function allows you to indicate non-linear progression for animations and transitions.

The Bezier curve is a mathematical tool that allows you to define a curve with only 4 numerical values.

The points P0 and P0' are fixed and delimit a square. They mark the starting point and the ending point of the curve.
P1 and P2 define the tangent of the curve at the start and end. In general, the curve does not pass through P1 and P2, unless it is a straight line.

The position of points P1 and P2 is defined by their coordinates on the axes: x1 and y1 for P1, x2 and y2 for P2. These 4 values ​​are the parameters of the cubic-bezier() function.

The abscissa x1 and x2 are two numbers between 0 and 1. The ordinates y1 and y2 can be negative or greater than 1.

Behind this link you will find a practical tool to define the cubic-bezier() function parameters : cubic-bezier().

The cubic-bezier() value can be used with the following properties:

• animation-timing-function : Defines the easing function to be used during an animation.
• transition-timing-function : A property that defines the easing function to be used during a transition.

Syntaxes of the cubic-bezier() function..

• animation-timing-function: cubic-bezier(0.15, 1.05, 0.67, 0.5); x1 y1 x2 y2

  The four parameters are unitless numerical values. They are defined in accordance with the diagram below:

  1. x1 is the value of the abscissa of point P1.
  2. y1 is the value of the ordinate of point P1.
  3. x2 is the value of the abscissa of point P2.
  4. y2 is the value of the ordinate of point P2.

  The x1 and x2 values ​​must be between 0 and 1.
  On the other hand, the values ​​y1 and y2 can exceed 1 or be negative, which causes a rebound effect, at the end of the course for values ​​greater than 1, or at the start of the course for negative values.

  

Simulator.

The simulator allows you to compare classic acceleration functions (ease-in, ease-out, etc.) with a regular linear displacement (the green block).

Browsers compatibility with cubic-bezier() function.

Transitions and animations are well handled by all current browsers. The same goes for the cubic-bezier() function.

1

Animations
support

2

Transitions
support

3

cubic-bezier()
function

Estimated overall support.

97%

97%

96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Caniuse

Historic of the cubic-bezier() function.

• CSS Easing Functions Level 1

  Introduction of easing functions for animations and transitions.
  Definition of the cubic-bezier() function.
  

  February 21, 2017

  Working Draft.

  

  April 30, 2019

  Candidate Recommendation.

  

  

• CSS Easing Functions Level 2

  No modification regarding the cubic-bezier() function.
  

  August 29, 2024

  Working Draft.

  

  

  

See also, regarding easing functions.

The CSS specifications published by W3C are organized into modules. The cubic-bezier() function is described in the module CSS Easing Functions.

Functions:

Cubic-bezier()

Determines, from 4 parameters, a non-linear progression for animations.

linear()

Defines a linear acceleration function, usable for animations with animation-timing-function.

steps()

This is an easing function, which defines a jerky progression, step by step.