Arraste as duas alças, P1 e P2, ou comece de uma predefinição. Pressione Reproduzir para ver o movimento e Executar para adicionar à lista.

O que é cubic-bezier?

A curva que decide como uma animação acelera e desacelera. Coloque direto em um transition ou animation timing-function.

Pressione o botão de copiar na caixa do CSS, ou em qualquer curva salva, e a regra timing-function vai para a sua área de transferência.

Editor de Easing CSS (Editor de Curva cubic-bezier)

Editor de Easing CSS

Modele a curva de velocidade de uma animação no olho e copie o CSS cubic-bezier.

Pré-visualização

P1 X

P1 Y

P2 X

P2 Y

CSS

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Você também pode arrastar as alças P1 e P2 para modelar você mesmo.

Modele uma curva, pressione Executar, e ela se acumula aqui.