# Catálogo de easings CSS

> As 30 curvas clássicas, de sine a bounce, lado a lado: veja cada uma em movimento e leve o cubic-bezier() ou o linear() numa custom property.

URL: https://dpw.dev/ferramentas/catalogo-de-easings/

As curvas clássicas de easing numa tabela só, da mais suave à mais brusca: escolha uma, veja o movimento em loop e leve a custom property pronta, com `cubic-bezier()` ou `linear()`.

Esta página tem um catálogo interativo no navegador. Exemplo: `easeOutCubic` numa transição de 600ms:

```css
:root {
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
}

.element {
  transition: transform 600ms var(--ease-out-cubic);
}
```

## O problema

Bibliotecas de animação e ferramentas de design falam em `easeOutCubic` e `easeInOutBack`, mas o CSS só tem cinco palavras-chave. Traduzir um nome para o `cubic-bezier()` certo é ir atrás de uma tabela, e comparar duas curvas é imaginar o movimento.

Duas famílias nem cabem num `cubic-bezier()`: `elastic` oscila e `bounce` quica, e as duas mudam de direção mais de uma vez. Até pouco tempo, elas pediam JavaScript.

## Como funciona

As famílias de `sine` a `expo` seguem potências cada vez maiores do tempo. A `cubic`, por exemplo:

`easeInCubic(t) = t³`

O `in` começa devagar e acelera, o `out` é o espelho (começa rápido e freia) e o `in-out` junta os dois. `circ` segue um quarto de círculo, `back` recua antes de sair ou passa do fim, `elastic` oscila como mola e `bounce` quica como bola.

As curvas e os valores de `cubic-bezier()` são os do [easings.net](https://easings.net/), que reúne as equações de Robert Penner. Até `back`, o `cubic-bezier()` aproxima bem a equação. Para `elastic` e `bounce`, o catálogo calcula a equação exata e a escreve como `linear()`, que liga pontos com retas, com erro de até 0,2% no progresso.

O easing vai numa custom property com o nome da curva. Assim o sistema de movimento vira uma lista curta de `--ease-*`, reaproveitada em todas as transições.

## As curvas

| Família | in | out | in-out |
| --- | --- | --- | --- |
| sine | `easeInSine`: `cubic-bezier(0.12, 0, 0.39, 0)` | `easeOutSine`: `cubic-bezier(0.61, 1, 0.88, 1)` | `easeInOutSine`: `cubic-bezier(0.37, 0, 0.63, 1)` |
| quad | `easeInQuad`: `cubic-bezier(0.11, 0, 0.5, 0)` | `easeOutQuad`: `cubic-bezier(0.5, 1, 0.89, 1)` | `easeInOutQuad`: `cubic-bezier(0.45, 0, 0.55, 1)` |
| cubic | `easeInCubic`: `cubic-bezier(0.32, 0, 0.67, 0)` | `easeOutCubic`: `cubic-bezier(0.33, 1, 0.68, 1)` | `easeInOutCubic`: `cubic-bezier(0.65, 0, 0.35, 1)` |
| quart | `easeInQuart`: `cubic-bezier(0.5, 0, 0.75, 0)` | `easeOutQuart`: `cubic-bezier(0.25, 1, 0.5, 1)` | `easeInOutQuart`: `cubic-bezier(0.76, 0, 0.24, 1)` |
| quint | `easeInQuint`: `cubic-bezier(0.64, 0, 0.78, 0)` | `easeOutQuint`: `cubic-bezier(0.22, 1, 0.36, 1)` | `easeInOutQuint`: `cubic-bezier(0.83, 0, 0.17, 1)` |
| expo | `easeInExpo`: `cubic-bezier(0.7, 0, 0.84, 0)` | `easeOutExpo`: `cubic-bezier(0.16, 1, 0.3, 1)` | `easeInOutExpo`: `cubic-bezier(0.87, 0, 0.13, 1)` |
| circ | `easeInCirc`: `cubic-bezier(0.55, 0, 1, 0.45)` | `easeOutCirc`: `cubic-bezier(0, 0.55, 0.45, 1)` | `easeInOutCirc`: `cubic-bezier(0.85, 0, 0.15, 1)` |
| back | `easeInBack`: `cubic-bezier(0.36, 0, 0.66, -0.56)` | `easeOutBack`: `cubic-bezier(0.34, 1.56, 0.64, 1)` | `easeInOutBack`: `cubic-bezier(0.68, -0.6, 0.32, 1.6)` |
| elastic | `easeInElastic`: `linear()` | `easeOutElastic`: `linear()` | `easeInOutElastic`: `linear()` |
| bounce | `easeInBounce`: `linear()` | `easeOutBounce`: `linear()` | `easeInOutBounce`: `linear()` |

## Quando usar

- Levar para o CSS o easing que o design ou a biblioteca de animação já chamam pelo nome.
- Montar o conjunto de `--ease-*` de um design system.
- Usar `elastic` e `bounce` sem JavaScript.
- Comparar famílias antes de decidir: de `sine` a `expo`, o mesmo movimento fica cada vez mais brusco.

Suporte: funciona em todos os navegadores atuais ([Baseline](https://webstatus.dev/features/linear-easing)).

## Leia no blog

- [Introdução a Animações CSS](https://dpw.dev/css/animacoes-css-introducao/)

## Conceitos Fundamentais de CSS

Custom property guarda qualquer valor, inclusive uma função de easing, e herda pela árvore como qualquer propriedade. O livro explica esse modelo em 237 páginas sobre como o CSS funciona por dentro. [Conheça o livro](https://dpw.dev/livro-conceitos-fundamentais-css/?utm_source=blog&utm_medium=cta_ferramentas)

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml