Copied content!
LOGOTIPO-devtoolspro

English

Cubic Bezier

OPTIONS

Animation Duration: 1s

Coordinates of P1 (Green Dot)

X1: 0

Y1: 0

Coordinates of P2 (Red Dot)

X2: 1

Y2: 1

PREVIEW

(0,0) (1,1)
-2.0    -1.5    -1.0    -0.5    0    2.0    1.5    1.0    0.5    0   
-0    -0.2    -0.4    -0.6    0.8    1   
cubic-bezier(0, 0, 1, 2)

PREVIEW

CODE

animation-timing-function: linear;
animation-duration: 1s

Utilization

The cubic-bezier() function is a built-in CSS function that is used to define a cubic Bézier curve. A Bézier curve is a mathematically defined curve used in two-dimensional graphic applications such as Adobe Illustrator, Inkscape, etc. The cubic-bezier() function defines a Cubic Bezier curve 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.


You can test for this property with our tool.