# Gerador de easing CSS

> Arraste os pontos de uma curva cubic-bezier(), veja o movimento e compare com ease, ease-in e ease-out antes de levar a transição.

URL: https://dpw.dev/ferramentas/gerador-de-easing/

Arraste os dois pontos da curva ou parta de uma pronta: o gerador mostra o movimento no ritmo da curva e entrega a transição com o `cubic-bezier()`.

Esta página tem um gerador interativo no navegador. Exemplo: uma saída rápida, que arranca e freia longo:

```css
.element {
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
```

## O problema

As palavras-chave do CSS cobrem poucos ritmos. Um menu que entra com `ease` funciona, mas parece igual a todos os outros, e o `ease-out` freia cedo demais para algo que precisa entrar com energia.

O `cubic-bezier()` faz qualquer ritmo, mas ninguém escreve `cubic-bezier(0.16, 1, 0.3, 1)` de cabeça: os quatro números não dizem nada até a curva aparecer.

## Como funciona

O `cubic-bezier()` descreve uma curva que vai de (0, 0) a (1, 1), puxada por dois pontos de controle:

`cubic-bezier(x1, y1, x2, y2)`

O eixo x é o tempo e o y é o progresso. `x1` e `x2` ficam entre 0 e 1, porque o tempo só anda para a frente; `y1` e `y2` podem sair dessa faixa, e aí o movimento recua antes de sair ou passa do fim antes de parar.

Curva íngreme é movimento rápido; curva deitada é movimento lento. Por isso o `ease-out` sobe íngreme no começo (arranca rápido) e deita no fim (freia).

O easing não muda a duração: a transição termina no mesmo tempo, só distribui o caminho de outro jeito. As palavras-chave são atalhos para curvas fixas, e o gerador escreve a palavra quando a curva é uma delas.

## As palavras-chave por dentro

| Palavra-chave | Curva |
| --- | --- |
| `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)` |

## Quando usar

- Menus, modais e avisos que entram na tela: saída rápida, que arranca e freia longo.
- Elementos que saem da tela: `ease-in`, com duração menor que a da entrada.
- Um destaque para algo novo, com uma curva que passa do fim e volta (sem exagero).
- Trocar o easing de uma biblioteca de animação em JavaScript por uma transição em CSS.

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

## Leia no blog

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

## Conceitos Fundamentais de CSS

Transição só acontece em propriedade que o navegador sabe interpolar, e cada propriedade custa diferente para repintar. O livro explica esse caminho 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