Resumindo
- Easing descreve como a velocidade de um movimento muda ao longo da sua duração, em vez de permanecer constante do início ao fim.
- O ease-out começa rápido e desacelera, o que serve ao que entra; o ease-in começa devagar e acelera, o que serve ao que sai.
- O movimento linear, em velocidade constante, parece mecânico em movimentos isolados, mas é o certo para loops contínuos e rotações.
- Uma curva cubic-bezier define qualquer easing com dois pontos de controle, e valores fora do intervalo de 0 a 1 criam ultrapassagem.
- As molas descrevem o movimento com ajustes físicos como rigidez e amortecimento, e o CSS consegue aproximá-las com a função linear().
Nesta página
O easing é como a velocidade de um movimento muda enquanto ele acontece. Sem easing, um objeto se move numa única velocidade constante e para de repente, o que parece mecânico. Com easing, ele acelera e desacelera como as coisas reais: uma gaveta sai rápido e se assenta, uma bola ganha velocidade ao cair. Escolher o easing certo é o jeito mais rápido de fazer qualquer animação parecer natural.
Como é o easing
Animadores desenham o easing como um gráfico de espaçamento: onde um objeto está em passos iguais de tempo. Quando as marcas estão igualmente espaçadas, a velocidade é constante. Quando se aglomeram, o objeto se move devagar; quando se afastam, ele se move rápido. Aqui estão os quatro easings básicos, cada um mostrando onze momentos iguais do mesmo movimento, da esquerda para a direita.
Os quatro easings de que você realmente precisa
O CSS nomeia cinco curvas básicas, e as ferramentas de design usam as mesmas ideias com nomes parecidos. Quatro delas cobrem quase todo trabalho. A quinta, ease, é o padrão do navegador: uma curva que começa bem rápido e se assenta com suavidade, parecida com um ease-out mais brando.
| Easing | Curva CSS | Use para |
|---|---|---|
| Ease-out | cubic-bezier(0, 0, 0.58, 1) | Coisas que entram ou aparecem: menus, cartões, títulos |
| Ease-in | cubic-bezier(0.42, 0, 1, 1) | Coisas que saem ou desaparecem |
| Ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) | Coisas que se movem de um lugar a outro na tela |
| Linear | cubic-bezier(0, 0, 1, 1) | Loops contínuos, rotações, barras de progresso, deriva de fundo |
A lógica é física. Algo que chega já deve estar em movimento quando aparece e depois se assentar, então usa ease-out. Algo que sai deve ganhar velocidade ao ir, então usa ease-in. O linear é errado para um movimento isolado, mas certo para tudo que é contínuo: um loop com easing nas pontas parece hesitar a cada repetição, como explicam os loops contínuos.
Como funcionam as curvas cubic-bezier
Toda curva de easing do CSS é desenhada entre dois pontos fixos, o início (0, 0) e o fim (1, 1). Um cubic-bezier() acrescenta dois pontos de controle que dobram a curva. O eixo horizontal é o tempo e o vertical é o progresso. Os valores de tempo devem ficar entre 0 e 1, mas os de progresso podem ir além, o que faz o movimento ultrapassar o alvo e voltar.
/* A stronger ease-out than the keyword: quick start, long gentle settle */
.card-enter {
transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Overshoot: the second y value above 1 carries it past, then back */
.badge-pop {
transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Exits: shorter and easing in */
.card-leave {
transition: transform 200ms cubic-bezier(0.4, 0, 1, 1);
}A referência do MDN sobre funções de easing lista todas as formas que o CSS aceita, incluindo steps() para movimento quadro a quadro.
Molas: easing vindo da física
Uma mola não usa uma curva e uma duração fixas. Você descreve a física, em geral a rigidez (com que força ela puxa para o alvo), o amortecimento (com que rapidez ela se acalma) e a massa, e o movimento decorre daí. Molas rígidas e bem amortecidas parecem ágeis e precisas; molas soltas e pouco amortecidas quicam. As molas são populares em interfaces de apps porque respondem com naturalidade quando o movimento é interrompido no meio.
Muitas bibliotecas de animação oferecem molas diretamente. No CSS puro, a função linear() consegue aproximar uma, listando pontos ao longo do caminho, o que os navegadores modernos aceitam.
/* A simple spring-like settle: past the target, back, then rest */
.sheet-open {
transition: transform 500ms
linear(0, 0.6 20%, 1.08 45%, 0.98 70%, 1);
}linear() liga os pontos com segmentos retos. Mais pontos dão uma curva mais suave; geradores podem calculá-los a partir dos ajustes da mola.Easing e duração trabalham juntos
A mesma curva parece diferente em durações diferentes. Um ease-out de 150 milissegundos parece um estalo firme; em 800, parece um deslize lento. Ajuste os dois à distância e à função. Os princípios de motion design trazem durações típicas.
Erros comuns
- Movimento linear para um menu ou cartão que entra
- Ease-in em coisas que aparecem, que começam sem vigor
- A mesma duração longa para movimentos pequenos e grandes
- Ultrapassagem saltitante em tudo
- Easing nas pontas de um loop contínuo
Melhor
- Ease-out para tudo que chega
- Ease-in, um pouco mais curto, para tudo que sai
- Curto para movimentos pequenos, mais longo para os maiores
- Ultrapassagem reservada a momentos pequenos e divertidos
- Linear nos loops, para que nunca hesitem
Easing em JavaScript, ferramentas de design e vídeo
As mesmas curvas funcionam fora do CSS. Em JavaScript, a Web Animations API aceita uma string de easing do CSS. Ferramentas de design e de vídeo usam as mesmas ideias com nomes como ease in, ease out e ease in and out, em geral com um editor de gráfico para curvas personalizadas e, em muitas ferramentas de protótipo, predefinições de mola.
const card = document.querySelector('.card')
card.animate(
[
{ transform: 'translateY(24px)', opacity: 0 },
{ transform: 'translateY(0)', opacity: 1 },
],
{ duration: 300, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', fill: 'both' },
)Seja qual for a curva, algumas pessoas preferem menos movimento. Respeite a configuração delas encurtando ou removendo o movimento; o movimento reduzido mostra como. E para fundos em loop, em que o linear costuma ser o certo, veja os fundos de gradiente animados.
Perguntas frequentes
O que é easing em animação?
Easing é o modo como a velocidade de um movimento muda ao longo da sua duração. Em vez de se mover numa velocidade constante, um movimento com easing acelera, desacelera ou as duas coisas, o que parece mais natural.
Qual é a diferença entre ease-in e ease-out?
O ease-in começa devagar e acelera, o que serve ao que sai. O ease-out começa rápido e desacelera, o que serve ao que entra.
Quando devo usar easing linear?
Para movimento contínuo, como loops, rotações, barras de progresso e deriva lenta de fundo. Em movimentos isolados, ele parece mecânico.
O que significa cubic-bezier em CSS?
Define uma curva de easing com dois pontos de controle entre o início e o fim fixos. Os valores de tempo ficam entre 0 e 1, enquanto valores de progresso além desse intervalo criam ultrapassagem.
O que é animação de mola?
Movimento descrito por ajustes físicos como rigidez, amortecimento e massa, em vez de uma curva fixa. O CSS consegue aproximar molas com a função de easing linear().
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil
