# Easing explicado: porque é que o bom movimento parece natural

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

O mesmo movimento pode parecer desajeitado ou natural conforme uma só definição. Essa definição é o easing, e umas poucas regras simples cobrem quase todos os casos.

## The short version

- O easing descreve como a velocidade de um movimento muda ao longo da sua duração, em vez de se manter constante do princípio ao fim.
- O ease-out começa rápido e abranda, o que serve para o que entra; o ease-in começa devagar e acelera, o que serve para o que sai.
- O movimento linear, a velocidade constante, parece mecânico em movimentos isolados mas é o certo para ciclos contínuos e rotações.
- Uma curva cubic-bezier define qualquer easing com dois pontos de controlo, e valores fora do intervalo de 0 a 1 criam ultrapassagem.
- As molas descrevem o movimento com definições físicas como rigidez e amortecimento, e o CSS consegue aproximá-las com a função linear().

O **easing** é a forma como a velocidade de um movimento muda enquanto decorre. Sem easing, um objeto move-se a uma velocidade constante e pára de repente, o que parece mecânico. Com easing, acelera e desacelera como as coisas reais: uma gaveta desliza depressa e assenta, uma bola ganha velocidade ao cair. Escolher o easing certo é a forma mais rápida de fazer qualquer animação parecer natural.

## Como se vê o easing

Os animadores desenham o easing como um gráfico de espaçamento: onde um objeto está em passos de tempo iguais. Quando as marcas estão igualmente espaçadas, a velocidade é constante. Quando se juntam, o objeto move-se devagar; quando se afastam, move-se depressa. Aqui estão os quatro easings básicos, cada um a mostrar 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: arranque 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: arranque rápido, paragem 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 num de onze momentos iguais. Linhas juntas significam lento, linhas afastadas significam rápido.

## Os quatro easings de que realmente precisas

O CSS nomeia cinco curvas básicas, e as ferramentas de design usam as mesmas ideias com nomes parecidos. Quatro delas cobrem quase todos os trabalhos. A quinta, `ease`, é a predefinição do navegador: uma curva que começa bastante rápida e assenta com suavidade, muito como um ease-out mais brando.

| Easing | Curva CSS | Usa 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 sítio para outro no ecrã |
| Linear | `cubic-bezier(0, 0, 1, 1)` | Ciclos contínuos, rotações, barras de progresso, deriva de fundos |

Os valores por palavra-chave do CSS. Muitas equipas usam curvas personalizadas ligeiramente mais fortes, mas as funções mantêm-se.

A lógica é física. Algo que chega já deve estar em movimento quando aparece e depois assentar, por isso faz ease-out. Algo que sai deve ganhar velocidade ao ir-se embora, por isso faz ease-in. O linear é errado para um movimento isolado, mas certo para tudo o que é contínuo: um ciclo com easing nas pontas parece hesitar de cada vez que se repete, como explicam os [ciclos contínuos](https://gradiently.design/pt-pt/guide/seamless-loop-video).

## Como funcionam as curvas cubic-bezier

Cada curva de easing em CSS é desenhada entre dois pontos fixos, o início (0, 0) e o fim (1, 1). Um `cubic-bezier()` acrescenta dois pontos de controlo que dobram a curva. O eixo horizontal é o tempo e o vertical é o progresso. Os valores de tempo têm de ficar entre 0 e 1, mas os valores de progresso podem ir além, o que faz um 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. Guarda a ultrapassagem para momentos pequenos e divertidos; em painéis grandes parece trémula.

A referência da 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 fotograma a fotograma.

## Molas: easing vindo da física

Uma mola não usa uma curva fixa nem uma duração. Descreves antes a física, normalmente a rigidez (com que força puxa para o alvo), o amortecimento (com que rapidez se acalma) e a massa, e o movimento resulta daí. As molas rígidas e bem amortecidas parecem ágeis e precisas; as soltas e pouco amortecidas ressaltam. As molas são populares em interfaces de apps porque respondem com naturalidade quando um movimento é interrompido a meio.

Muitas bibliotecas de animação oferecem molas diretamente. Em CSS simples, a função `linear()` consegue aproximar uma listando pontos ao longo do seu percurso, o que os navegadores modernos suportam.

```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()` une os pontos com segmentos retos. Mais pontos dão uma curva mais suave; há geradores que os calculam a partir das definições da mola.

## Easing e duração trabalham juntos

A mesma curva sente-se diferente em durações diferentes. Um ease-out de 150 milissegundos lê-se como um estalido nítido; em 800 lê-se como um deslizar lento. Ajusta ambos à distância e à função. Os [princípios de design de movimento](https://gradiently.design/pt-pt/guide/motion-design-principles) têm durações típicas.

### Erros comuns

- Movimento linear num menu ou cartão que entra
- Ease-in no que aparece, que arranca de forma preguiçosa
- A mesma duração longa para movimentos pequenos e grandes
- Ultrapassagem saltitante em tudo
- Easing nas pontas de um ciclo contínuo

### Melhor

- Ease-out para tudo o que chega
- Ease-in, um pouco mais curto, para tudo o que sai
- Curto para movimentos pequenos, mais longo para os maiores
- Ultrapassagem guardada para momentos pequenos e divertidos
- Linear para ciclos, para nunca hesitarem

## Easing em JavaScript, ferramentas de design e vídeo

As mesmas curvas funcionam fora do CSS. Em JavaScript, a Web Animations API aceita uma cadeia de easing CSS. As ferramentas de design e de vídeo usam as mesmas ideias com nomes como ease in, ease out e ease in and out, normalmente com um editor de gráficos para curvas personalizadas e, em muitas ferramentas de prototipagem, 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. Respeita essa definição encurtando ou removendo o movimento; o guia de [movimento reduzido](https://gradiently.design/pt-pt/guide/reduced-motion) mostra como. E para fundos em ciclo, onde o linear costuma ser o certo, vê os [fundos de gradiente animados](https://gradiently.design/pt-pt/guide/animated-gradient-background).

## FAQ

### O que é o easing numa animação?

O easing é a forma como a velocidade de um movimento muda ao longo da sua duração. Em vez de se mover a velocidade constante, um movimento com easing acelera, desacelera ou ambos, 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 para o que sai. O ease-out começa depressa e abranda, o que serve para o que entra.

### Quando devo usar easing linear?

Para movimento contínuo como ciclos, rotações, barras de progresso e deriva lenta de fundos. Em movimentos isolados parece mecânico.

### O que significa cubic-bezier em CSS?

Define uma curva de easing com dois pontos de controlo entre o início e o fim fixos. Os valores de tempo ficam entre 0 e 1, enquanto os valores de progresso além desse intervalo criam ultrapassagem.

### O que é a animação por mola?

Movimento descrito por definições físicas como rigidez, amortecimento e massa em vez de uma curva fixa. O CSS consegue aproximar molas com a função de easing linear().