Desenhe e visualize curvas de easing com drag interativo, copie o transition pronto.
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.
A função é cubic-bezier(x1, y1, x2, y2): esses quatro números são as coordenadas de dois pontos de controle, P1 = (x1, y1) e P2 = (x2, y2). Os pontos extremos P0 = (0, 0) e P3 = (1, 1) são fixos e representam o início e o fim da animação. O eixo X é o tempo, sempre de 0 a 1 (0% a 100% da duração), por isso x1 e x2 ficam obrigatoriamente presos ao intervalo [0, 1].
O eixo Y é o progresso da propriedade animada e não tem essa trava, nesta ferramenta y pode ir de -2 a 2. Valores de Y entre 0 e 1 desenham curvas de aceleração e desaceleração normais; valores acima de 1 ou abaixo de 0 fazem a curva ultrapassar o destino e voltar, criando o overshoot que dá a sensação de mola.
O clássico ease-out é cubic-bezier(0, 0, 0.58, 1): a curva sobe rápido no começo e desacelera no fim, dando a sensação de algo que chega e assenta, a escolha mais comum para elementos que entram na tela. Aplicado, vira transition: transform 300ms cubic-bezier(0, 0, 0.58, 1);.
Uma mola leve é cubic-bezier(0.34, 1.56, 0.64, 1): o y1 = 1.56 passa de 1, então a animação ultrapassa o valor final e volta, imitando elasticidade. Compare com o linear cubic-bezier(0, 0, 1, 1), que mantém velocidade constante e costuma parecer mecânico em interfaces.
A mesma curva funciona em transition e em animation-timing-function (inclusive por keyframe), então você reaproveita um easing em hovers, entradas de modal, menus e microinterações. Como regra prática, use ease-out (ou o Material standard, cubic-bezier(0.2, 0, 0, 1)) para elementos que entram e ease-in para os que saem da tela.
Duas notas de cuidado: overshoot exagerado (y muito acima de 1) pode parecer 'borrachudo' e cansar em interações repetidas, então use com moderação; e respeite prefers-reduced-motion, reduzindo ou removendo o movimento para quem sinaliza sensibilidade a animações. Curvas suaves melhoram a percepção de responsividade sem prejudicar a acessibilidade.
Cole o código no seu HTML e a ferramenta aparece na sua página, sem a navegação e sem os anúncios do J-Kit. Ela continua rodando no navegador de quem visita o seu site.
<iframe
src="https://jkit.tools/embed/pt-BR/editor-cubic-bezier"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Editor Cubic Bezier"
></iframe>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.
É 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 dois pontos de controle de uma curva cúbica de Bézier, enquanto o início (0,0) e o fim (1,1) são fixos. O formato da curva entre esses pontos é o que dá personalidade ao movimento.
transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);O CSS é gerado localmente no navegador.