Pontos de controle

Point P1 (x1, y1)

0 0.25 1
0 0.1 1

Point P2 (x2, y2)

0 0.25 1
0 1 1

Predefinições de atenuação populares

Saída CSS

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

Preview

Duration: 500ms

Visualização da curva de Bézier

time (1) easing (1) easing (0) P0 (0, 1) P1 (0.25, 0.1) P2 (0.25, 1) P3 (1, 1)

x1

0.25

y1

0.1

x2

0.25

y2

1

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

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

Related Tools

Conversor SCSS para CSS

Transforme seu código SCSS em CSS. Rápido, fácil e seguro.

Gerador de transição CSS3

Transição suave de opacidade

Gere transformações CSS3 com facilidade

Uma ferramenta poderosa e intuitiva para criar transformações CSS3 complexas sem escrever código. Visualize as alterações em tempo real e copie o CSS gerado para usar em seus projetos.

Crie Carregadores CSS Bonitos

Gere animações de carregamento CSS personalizadas em segundos com nossa interface intuitiva de arrastar e soltar. Não é necessário escrever nenhuma linha de código!

Conversor de eficiência de combustível

Converta entre diferentes unidades de eficiência de combustível com precisão

Conversor de Base64 para Imagem

Converta strings Base64 de volta em imagens para desenvolvimento web e visualização de dados