Catálogo de easings CSS
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().
Veja
Copie o código
: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, 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.
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
elasticebouncesem JavaScript. - Comparar famílias antes de decidir: de
sineaexpo, o mesmo movimento fica cada vez mais brusco.
Leia no blog
Outras ferramentas
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.
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.