Gerador de cubic-bezier: curvas de easing com animação

Como usar

Arraste um Ponto de controle 1 ou Ponto de controle 2 no gráfico. Clique em um ponto e use as setas do teclado para passos pequenos; segure Shift para passos maiores.
Digite valores exatos em x1 (0 a 1), y1, x2 (0 a 1) e y2 quando precisar de uma curva precisa. Os valores de x devem continuar entre 0 e 1.
Escolha uma predefinição, como ease-in-out, ou clique em Reproduzir sob Visualização da animação para ver a bola seguir a curva.
Copie a declaração CSS e use-a em uma transição ou em uma animação.

O que os quatro números significam

Uma curva de easing de Bézier cúbica começa em (0, 0) e termina em (1, 1). Seus dois pontos de controle, (x1, y1) e (x2, y2), definem a forma dela. No eixo horizontal está a parte do tempo que já passou, e no eixo vertical, a parte da mudança já feita. A especificação CSS Easing Functions (em inglês) limita os valores de x dos pontos de controle ao intervalo de 0 a 1, porque o tempo não pode voltar nem passar do fim.

Os valores de y não têm esse limite. Um valor de y acima de 1 ou abaixo de 0 faz a curva ultrapassar o alvo, então a mudança passa do fim e volta, ou começa andando para o outro lado.

cubic-bezier(x1, y1, x2, y2), com x1 e x2 entre 0 e 1

As predefinições e a animação

A palavra-chave ease é cubic-bezier(0.25, 0.1, 0.25, 1), ease-in é cubic-bezier(0.42, 0, 1, 1), ease-out é cubic-bezier(0, 0, 0.58, 1) e ease-in-out é cubic-bezier(0.42, 0, 0.58, 1), como a especificação as define. O easing linear é uma reta, que a curva cubic-bezier(0, 0, 1, 1) também desenha.

A bola percorre a curva como o tempo de uma animação, então você vê o easing como movimento. Se o seu dispositivo pedir movimento reduzido, a animação começa pausada, e Reproduzir a inicia.

Use uma curva suave, como ease-out, para um elemento que chega à página, e ease-in para um que sai dela.
Mantenha uma transição curta, para que o easing seja sentido e não esperado.

Exemplo resolvido: o progresso na metade do tempo

A curva ease-in-out, cubic-bezier(0.42, 0, 0.58, 1), é simétrica em relação ao centro, então na metade do tempo ela já fez exatamente metade da mudança: a leitura mostra 0,5000.

A curva ease, cubic-bezier(0.25, 0.1, 0.25, 1), está mais adiantada no mesmo ponto. Na metade do tempo, já fez 0,8024 da mudança, então anda rápido no começo e desacelera no fim.

Perguntas frequentes

O que a bola mostra?

A bola percorre a pista do extremo esquerdo ao direito, e sua posição segue a curva: a posição horizontal é a parte da mudança já feita. Quando a curva passa de 1, a bola ultrapassa o fim da pista e é cortada ali.

Por que os valores de x não podem passar de 0 e 1?

O eixo horizontal é o tempo, e a curva cobre o tempo do início ao fim. Um tempo antes do início ou depois do fim não tem lugar na curva, então a especificação mantém os valores de x dos pontos de controle entre 0 e 1. Os valores de y não têm esse limite.

Qual é a diferença entre ease-in e ease-out?

ease-in começa devagar e acelera em direção ao fim, enquanto ease-out começa rápido e desacelera no fim. As duas curvas são imagens espelhadas uma da outra, então a mesma mudança é lida ao contrário.

Posso usar o valor em uma animação, além de uma transição?

Sim. O mesmo valor cubic-bezier() funciona em animation-timing-function e em transition-timing-function, então a declaração pode ser usada em qualquer um dos dois lugares.

O que eu arrasto ou digito é guardado ou enviado para algum servidor?

Não. A curva e a animação são feitas no seu navegador. Nada é guardado nem enviado para o nosso servidor, então copie a declaração antes de sair da página.

Fontes

Números e texto verificados pela última vez em terça-feira, 10 de novembro de 2026.