Como usar: Gerador de Cubic Bezier
- Arraste as duas alças roxas para moldar a curva, ou digite os quatro números.
- Pressione Play para comparar sua curva com um easing padrão, como
ease. - Para movimentos físicos, mude para Mola ou Quique e ajuste rigidez, amortecimento ou quicadas.
- Copie o valor para CSS, Tailwind, Web Animations API, Framer Motion ou GSAP.
O que é um easing cubic-bezier?
Uma curva de easing mapeia o tempo (eixo x) para o progresso (eixo y). cubic-bezier(x1, y1, x2, y2) descreve essa curva com dois pontos de controle; o início (0,0) e o fim (1,1) são fixos. Curvas que sobem rápido parecem ágeis (ease-out), curvas que começam devagar parecem pesadas (ease-in), e valores de y acima de 1 ou abaixo de 0 criam um leve estouro, um efeito “back” divertido. Os valores de x devem permanecer entre 0 e 1.
Qual easing devo usar?
| Movimento | Easing | Por quê |
|---|---|---|
| Elemento entrando na tela | ease-out (ex.: cubic-bezier(.16,1,.3,1)) | Chega rápido e assenta suavemente |
| Elemento saindo | ease-in | Acelera ao se afastar |
| Movendo-se na tela | ease-in-out | Início e fim naturais |
| UI divertida, toggles | back / spring | Um pequeno estouro deixa tudo vivo |
| Progresso, spinners | linear | Velocidade constante |
Molas e quiques com linear()
Um cubic-bezier só pode ultrapassar o alvo uma vez. Molas reais oscilam várias vezes e quiques batem no chão repetidamente, o que exige a função CSS linear(): uma lista de valores de progresso que o navegador liga com linhas retas. Esta ferramenta simula uma mola (rigidez, amortecimento, massa) ou uma bola quicando e a converte em linear(), junto com a duração que a animação precisa para estabilizar. linear() funciona no Chrome e Edge 113+, Firefox 112+ e Safari 17.2+; use o cubic-bezier como alternativa para navegadores mais antigos.
Use sua curva no gerador de animação CSS ou em loaders no gerador de loader CSS.
Também pesquisado como: gerador cubic bezier, easing css, cubic-bezier css, funções de easing, animação de mola css, easing linear(), gerador de easing, curva bezier css.
Ferramentas que combinam com: Gerador de Cubic Bezier
- Gerador de Keyframes CSS — Um editor visual para @keyframes.
- Gerador de Animação Hover CSS — Crie animações hover para botões, cards, links e ícones.
- Calculadora de braçadeiras — Digite um tamanho mínimo e máximo e o intervalo da janela de visualização — obtenha um valor fácil de ajustar com o zoom clamp() com explicações matemáticas, uma pré-visualização em tempo real e uma escala completa e fluida de fonte ou espaçamento.
- Gerador de Gradiente CSS — Monte um gradiente visualmente: arraste as paradas de cor, troque o ângulo ou o tipo, comece de uma predefinição e copie um CSS pronto para produção, com uma cor sólida de fallback.
Perguntas frequentes
Os valores de y podem passar de 1 ou ficar abaixo de 0?
Como uso um cubic-bezier no Tailwind?
ease-[cubic-bezier(0.16,1,0.3,1)], ou adicione em theme.extend.transitionTimingFunction. O painel de saída mostra as duas opções.