Gerador de Cubic Bezier (Easing CSS) Online
Ajuste os pontos de controle para criar a curva de aceleração ideal, visualize a curva e teste com a animação ao vivo. Copie a função cubic-bezier() pronta.
O que é cubic-bezier no CSS?
A função cubic-bezier() define a curva de aceleração (easing / timing function) de uma animação ou transição CSS. Ela controla como a velocidade muda ao longo do tempo — se a animação começa lenta e acelera, começa rápida e desacelera, etc.
Sintaxe:
transition-timing-function: cubic-bezier(x1, y1, x2, y2);A curva sempre começa em (0, 0) e termina em (1, 1). Os quatro valores definem dois pontos de controle:
| Valor | Significado |
|---|---|
x1, y1 | Primeiro ponto de controle (deve ter x entre 0 e 1) |
x2, y2 | Segundo ponto de controle (x entre 0 e 1) |
Os valores de y podem ultrapassar 0 e 1, criando efeitos de “elástico” (bounce/overshoot).
Presets equivalentes
As palavras-chave prontas do CSS correspondem a curvas cubic-bezier específicas:
| Palavra-chave | cubic-bezier |
|---|---|
linear | cubic-bezier(0, 0, 1, 1) |
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) |
ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) |
Como ler a curva
- Eixo X representa o tempo (0% a 100% da duração).
- Eixo Y representa o progresso da animação (0% a 100% do movimento).
- Uma curva mais íngreme indica movimento mais rápido naquele trecho; uma curva mais plana indica movimento mais lento.
Onde usar
.elemento {
transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.animado {
animation: entrar 0.6s cubic-bezier(0.42, 0, 0.58, 1);
}Perguntas frequentes
O que significam os quatro números do cubic-bezier?
São as coordenadas de dois pontos de controle que moldam a curva: x1, y1 é o primeiro ponto de controle (ligado ao início da curva, em (0, 0)) e x2, y2 é o segundo (ligado ao fim, em (1, 1)).
Por que x precisa ficar entre 0 e 1?
Porque o eixo X representa o tempo, que avança sempre de 0 a 1. Valores fora dessa faixa tornam a curva inválida.
Posso criar efeito de “bounce”?
Sim. Use valores de y abaixo de 0 ou acima de 1 para fazer a animação ultrapassar o destino e voltar, simulando um elástico.
cubic-bezier funciona em transitions e animations?
Sim, funciona em ambos, na propriedade transition-timing-function e animation-timing-function.