Gerador de Cubic Bezier
Arraste dois pontos de controle para moldar uma curva de easing cubic-bezier() CSS, veja o movimento em prévia e copie a função de tempo — tudo no seu navegador.
O Gerador de Cubic Bezier roda inteiramente no seu navegador. A curva que você arrasta, a prévia da animação e o CSS cubic-bezier() gerado nunca saem do seu dispositivo e nada é enviado à ArrayKit.
Abrir o Formatador CSS
Sobre Gerador de Cubic Bezier
O Gerador de Cubic Bezier permite moldar uma curva de easing CSS arrastando seus dois pontos de controle sobre um gráfico ao vivo, depois copia a função de tempo cubic-bezier(x1, y1, x2, y2) exata para a sua transição ou animação. Comece de predefinições nomeadas como ease, ease-in-out, ou um saltitante ease-out-back, depois ajuste as alças com o mouse ou as teclas de seta. Um ponto animado reproduz sua curva em tempo real para que você sinta a aceleração antes de colá-la. É feito para desenvolvedores front-end e designers ajustando movimento para uma transition-timing-function ou animation-timing-function sem adivinhar números. Tudo é renderizado no seu dispositivo — a curva, a prévia e o CSS gerado nunca saem do seu navegador.
Recursos
- Arraste dois pontos de controle sobre uma curva ao vivo para moldar o easing
- Predefinições nomeadas: linear, ease, ease-in, ease-out, ease-in-out e curvas back
- Ponto animado e demo de escala/opacidade reproduzem a curva em tempo real
- Copia o valor cubic-bezier() exato e uma regra transition-timing-function pronta
- Desloque cada alça com as teclas de seta para ajuste preciso ao pixel
- Alças de overshoot permitem montar curvas saltitantes ease-back com y além de 1
- Valores de X são limitados automaticamente à faixa de 0 a 1 exigida pelo CSS
- Reconhece e rotula a curva atual quando corresponde a uma predefinição padrão
Como usar Gerador de Cubic Bezier
- Escolha uma predefinição como ease-in-out como ponto de partida
- Arraste qualquer ponto de controle para remodelar a curva, ou desloque-o com as teclas de seta
- Observe a prévia animada para sentir a aceleração que você montou
- Copie o valor cubic-bezier() ou a regra transition-timing-function completa
- Cole-o na sua abreviação de transition ou animation CSS
Exemplo
Entrada
control point 1: 0.34, 1.56
control point 2: 0.64, 1
Saída
.card {
transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
Uma curva ease-out-back ultrapassa 1 para um leve salto.
Erros comuns e solução de problemas
- O navegador ignora meu cubic-bezier() e recorre a linear. — Ambos os valores de x precisam estar entre 0 e 1. Esta ferramenta os limita para você, mas um x1 ou x2 digitado à mão fora dessa faixa torna o valor inteiro inválido.
- A animação parece rígida no início e no fim. — Puxe cada alça para mais longe do seu ponto final. Alças próximas de (0,0) e (1,1) mal curvam a curva, então o movimento fica quase linear.
- Quero um salto mas o valor de y volta. — Arraste um ponto de controle acima do topo do gráfico para que seu y passe de 1 (ou abaixo de 0). Só o x é restringido; o overshoot de y é o que cria antecipação e salto.
- Minha predefinição deixou de ser reconhecida depois que arrastei uma alça. — Qualquer mudança torna a curva personalizada, então o rótulo da predefinição desaparece. Clique de novo no chip da predefinição para voltar aos seus valores exatos.
Perguntas frequentes
- O que significam os quatro números em cubic-bezier()?
- São as coordenadas x e y de dois pontos de controle: cubic-bezier(x1, y1, x2, y2). O início e o fim da curva são fixos em (0,0) e (1,1), e essas duas alças curvam o caminho entre eles para definir como a animação acelera.
- Por que os valores de x precisam ficar entre 0 e 1?
- No CSS o eixo x é o progresso da animação ao longo do tempo, que só avança. Manter x1 e x2 entre 0 e 1 garante que a curva represente um único valor em cada momento. O y pode sair dessa faixa para criar overshoot ou antecipação.
- Como faço um easing saltitante ou com overshoot?
- Dê a um ponto de controle um y maior que 1 ou menor que 0. Por exemplo, cubic-bezier(0.34, 1.56, 0.64, 1) ultrapassa o fim antes de assentar, o que soa como um salto suave. Arraste uma alça acima ou abaixo do gráfico para fazer isso.
- Qual é a diferença entre ease e ease-in-out?
- ease é cubic-bezier(0.25, 0.1, 0.25, 1) e começa um pouco mais rápido que ease-in-out, que é cubic-bezier(0.42, 0, 0.58, 1) e é simétrico. ease-in-out acelera e desacelera de forma uniforme, enquanto ease concentra o movimento um pouco no início.
- Posso usar este valor para animation-timing-function também?
- Sim. Um cubic-bezier() funciona em qualquer lugar onde o CSS aceita uma função de easing, incluindo transition-timing-function, animation-timing-function e o campo de tempo das abreviações de transition e animation.
- Arrastar a curva envia algo para um servidor?
- Não. O editor, a prévia animada e o CSS gerado são todos calculados no seu navegador com JavaScript puro. Nada sobre a sua curva é enviado à ArrayKit.
Ferramentas relacionadas
Todas as ferramentas de ArrayKit