Gerador Cubic Bezier
Projete funções de temporização CSS cubic-bezier com um editor de curva interativo, pré-visualização de animação e predefinições de easing.
Editor de Curva
Predefinições
Pontos de Controle
P1
P2
Pré-visualização de Animação
s
Translate
Scale
Opacity
Saída CSS
Ctrl+Enter executarCtrl+Shift+C copiar
Saiba mais
Gerador de Bezier cubico: easing de animacao CSS visual
Curvas de Bezier cubicas controlam como as animacoes CSS parecem. Aprenda a criar easing personalizado.
O que sao curvas de Bezier cubicas?
Uma curva de Bezier cubica e uma funcao matematica usada em CSS para definir o tempo de animacoes e transicoes. Escrita como cubic-bezier(x1, y1, x2, y2), descreve como uma animacao progride do inicio ao fim mapeando o tempo para o progresso ao longo de uma curva suave definida por quatro pontos de controle.
5 min de leituraLer o guia completo