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
Translação
Escala
Opacidade
Saída CSS
Ctrl+Enter executarCtrl+Shift+C copiar
Saiba mais
Gerador de Bezier cubico: easing de animação CSS visual
Curvas de Bezier cubicas controlam como as animações CSS parecem. Aprenda a criar easing personalizado.
O que sao curvas de Bezier cubicas?
Uma curva de Bezier cubica e uma função matemática usada em CSS para definir o tempo de animações e transições. Escrita como cubic-bezier(x1, y1, x2, y2), descreve como uma animação 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