Gerador de Bézier Cúbico CSS

Documentação do Cubic Bezier

O que é uma curva cúbica de Bézier?

A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.

Sintaxe CSS

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

Casos de uso comuns

Transições animadas:Crie animações suaves para elementos que alteram propriedades.
Efeitos de rolagem:Controle a velocidade das animações de rolagem.
Elementos interativos:Defina como os elementos respondem às interações do usuário, como passar o mouse ou clicar.
Design de movimento:Crie sequências de movimento complexas para elementos da interface do usuário.

Funções populares de facilitação

Ease (default)

Começa devagar, acelera rapidamente e depois desacelera novamente.

cubic-bezier(0.25, 0.1, 0.25, 1)

Linear

Velocidade constante do início ao fim.

cubic-bezier(0, 0, 1, 1)

Ease-in

Começa devagar, depois acelera.

cubic-bezier(0.42, 0, 1, 1)

Ease-out

Começa rápido, depois desacelera.

cubic-bezier(0, 0, 0.58, 1)

Dicas para criar curvas personalizadas

Mantenha os valores de x entre 0 e 1:Valores fora desse intervalo podem causar um comportamento inesperado.
Visualize a curva:Use o gráfico interativo para entender como as alterações afetam a animação.
Teste com elementos reais:Sempre visualize sua curva com componentes reais da interface do usuário para garantir que ela pareça correta.
Salvar predefinições:Marque curvas úteis para projetos futuros.