É uma função matemática que define como uma animação CSS acelera e desacelera ao longo do tempo. Os quatro parâmetros (x1, y1, x2, y2) descrevem os pontos de controle de uma curva cúbica.
Editor de Cubic Bezier CSS
Desenhe e visualize curvas de easing com drag interativo — copie o transition pronto.
Easing não é só velocidade — é a personalidade da animação. Cubic-bezier define com precisão matemática como a velocidade muda ao longo do tempo.
Uma curva cúbica de Bézier é definida por quatro pontos: P0 (0,0) e P3 (1,1) são fixos e representam início e fim da animação. P1 e P2 são os pontos de controle que você arrasta. O eixo X representa o tempo (0 a 100% da duração). O eixo Y representa o progresso da animação. Quando a curva sobe rápido e desacelera (ease-out), a sensação é de física natural. Quando começa lenta e acelera (ease-in), simula algo ganhando impulso. Curvas que ultrapassam Y=1 criam o overshooting — o elemento vai além do destino e volta, simulando elasticidade.
Arraste os pontos de controle ou ajuste os valores numericamente.
- Arraste os pontos de controle circulares no gráfico SVG para moldar a curva. O ponto verde controla o início, o azul controla o final da aceleração.
- Use os campos numéricos para ajuste fino de x1, y1, x2, y2 com precisão de dois decimais.
- Clique em 'Reproduzir animação' para ver o efeito em tempo real, ajuste a duração e copie o CSS final.
Fontes e referências desta ferramenta
Estas referências ajudam a contextualizar fórmulas, padrões, APIs e limitações usadas nesta página. Elas não substituem validação profissional quando o resultado tiver impacto jurídico, financeiro, médico ou operacional.