Bézier Cúbico

OPÇÕES

Duração da Animação: 1s

Coordenadas de P1 (Ponto Verde)

X1: 0

Y1: 0

Coordenadas de P2 (ponto vermelho)

X2: 1

Y2: 1

VISUALIZAR

-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)

VISUALIZAR

CÓDIGO

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

Utilização

A função cubic-bezier() é uma função CSS integrada usada para definir uma curva cúbica de Bézier. Uma curva de Bézier é uma curva definida matematicamente usada em aplicativos gráficos bidimensionais, como Adobe Illustrator, Inkscape, etc. A função cubic-bezier() define uma curva de Bezier cúbica por quatro pontos P0, P1, P2 e P3. P0 e P3 são o início e o fim da curva e no CSS esses pontos são fixos porque as coordenadas são proporções.

Você pode testar esta propriedade com nossa ferramenta.