# Easing explicado: por que um bom movimento parece natural

[Canonical HTML page](https://gradiently.design/pt-br/guide/easing)

O mesmo movimento pode parecer desajeitado ou natural dependendo de um único ajuste. Esse ajuste é o easing, e umas poucas regras simples cobrem quase todos os casos.

## The short version

- 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().

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.

- Linear: espaçamento uniforme: `linear-gradient(90deg, #f9a8d4 0% 1.2%, #1e1b4b 1.2% 9.4%, #f9a8d4 9.4% 10.6%, #1e1b4b 10.6% 19.4%, #f9a8d4 19.4% 20.6%, #1e1b4b 20.6% 29.4%, #f9a8d4 29.4% 30.6%, #1e1b4b 30.6% 39.4%, #f9a8d4 39.4% 40.6%, #1e1b4b 40.6% 49.4%, #f9a8d4 49.4% 50.6%, #1e1b4b 50.6% 59.4%, #f9a8d4 59.4% 60.6%, #1e1b4b 60.6% 69.4%, #f9a8d4 69.4% 70.6%, #1e1b4b 70.6% 79.4%, #f9a8d4 79.4% 80.6%, #1e1b4b 80.6% 89.4%, #f9a8d4 89.4% 90.6%, #1e1b4b 90.6% 98.8%, #f9a8d4 98.8% 100%)`
- Ease-in: início lento, fim rápido: `linear-gradient(90deg, #f9a8d4 0% 2.3%, #1e1b4b 2.3% 5.6%, #f9a8d4 5.6% 6.8%, #1e1b4b 6.8% 12.4%, #f9a8d4 12.4% 13.6%, #1e1b4b 13.6% 20.9%, #f9a8d4 20.9% 22.1%, #1e1b4b 22.1% 30.9%, #f9a8d4 30.9% 32.1%, #1e1b4b 32.1% 42.3%, #f9a8d4 42.3% 43.5%, #1e1b4b 43.5% 54.9%, #f9a8d4 54.9% 56.1%, #1e1b4b 56.1% 68.6%, #f9a8d4 68.6% 69.8%, #1e1b4b 69.8% 83.3%, #f9a8d4 83.3% 84.5%, #1e1b4b 84.5% 98.8%, #f9a8d4 98.8% 100%)`
- Ease-out: início rápido, parada suave: `linear-gradient(90deg, #f9a8d4 0% 1.2%, #1e1b4b 1.2% 15.5%, #f9a8d4 15.5% 16.7%, #1e1b4b 16.7% 30.2%, #f9a8d4 30.2% 31.4%, #1e1b4b 31.4% 43.9%, #f9a8d4 43.9% 45.1%, #1e1b4b 45.1% 56.5%, #f9a8d4 56.5% 57.7%, #1e1b4b 57.7% 67.9%, #f9a8d4 67.9% 69.1%, #1e1b4b 69.1% 77.9%, #f9a8d4 77.9% 79.1%, #1e1b4b 79.1% 86.4%, #f9a8d4 86.4% 87.6%, #1e1b4b 87.6% 93.2%, #f9a8d4 93.2% 94.4%, #1e1b4b 94.4% 97.7%, #f9a8d4 97.7% 100%)`
- Ease-in-out: suave nas duas pontas: `linear-gradient(90deg, #f9a8d4 0% 2.6%, #1e1b4b 2.6% 7.6%, #f9a8d4 7.6% 8.8%, #1e1b4b 8.8% 18.1%, #f9a8d4 18.1% 19.3%, #1e1b4b 19.3% 32.6%, #f9a8d4 32.6% 33.8%, #1e1b4b 33.8% 49.4%, #f9a8d4 49.4% 50.6%, #1e1b4b 50.6% 66.2%, #f9a8d4 66.2% 67.4%, #1e1b4b 67.4% 80.7%, #f9a8d4 80.7% 81.9%, #1e1b4b 81.9% 91.2%, #f9a8d4 91.2% 92.4%, #1e1b4b 92.4% 97.4%, #f9a8d4 97.4% 100%)`

Gráficos de espaçamento calculados a partir das curvas CSS. Cada linha rosa é a posição do objeto em um de onze momentos iguais. Linhas juntas significam lento, linhas afastadas significam rápido.

## 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 |

As palavras-chave do CSS. Muitas equipes usam curvas personalizadas um pouco mais fortes, mas os papéis continuam os mesmos.

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](https://gradiently.design/pt-br/guide/seamless-loop-video).

## 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.

```css
/* 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);
}
```

Curvas personalizadas em CSS. Guarde a ultrapassagem para momentos pequenos e divertidos; em painéis grandes ela parece bamba.

A referência do MDN sobre [funções de easing](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function) 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.

```css
/* 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);
}
```

O `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](https://gradiently.design/pt-br/guide/motion-design-principles) 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.

```js
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' },
)
```

Uma entrada com easing usando a Web Animations API, com a mesma curva do CSS acima.

Seja qual for a curva, algumas pessoas preferem menos movimento. Respeite a configuração delas encurtando ou removendo o movimento; o [movimento reduzido](https://gradiently.design/pt-br/guide/reduced-motion) mostra como. E para fundos em loop, em que o linear costuma ser o certo, veja os [fundos de gradiente animados](https://gradiently.design/pt-br/guide/animated-gradient-background).

## FAQ

### 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().