Gerador de easing CSS
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().
Veja
Copie o código
.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.
Leia no blog
Outras ferramentas
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.
LayoutCalculadora de aspect ratio
Descubra a largura ou a altura a partir de uma proporção e leve o aspect-ratio pronto para o CSS.
SeletoresGerador de quantity queries com :has()
Monte o seletor que muda o layout pelo número de filhos e veja a condição valer na prévia.