How Cubic Bezier Curves works?

men

Do you know Cubic Bezier?

Cubic?

women
Parametric curves defined by four control points (hence 'cubic'`). Imagine points P0, P1, P2, and P3. The curve starts at P0, goes towards P1, and ends at P3, influenced by P2's direction. P1 and P2 are called 'handles' and don't necessarily lie on the curve itself, but they control its shape and direction

custom

cubic-bezier(0.1, 0.6, 0.7, 1);

Popular easing

Extra easing

animation exemples

Movement

Liniar

custom

Width

Liniar

custom

Heigth

Liniar

custom

Scale

Liniar

custom

Rotate

Liniar

custom