Faça mais curto do que você imagina
- Uma transição única deve ter entre 0,15 e 0,4 segundo
- Acelere até achar que ficou rápido demais e depois reduza um pouco
Faça a ação combinar com a curva
- Movimento é tão subjetivo quanto cor, mas igualmente importante
- Pense no movimento do mundo real e compare
Aceleração e desaceleração
- Se a animação parecer artificial, é porque ela começa ou termina de forma brusca
- Mesmo que seja sutil, é bom adicionar easing-in/out à curva cubic-bezier
- Para parecer real, a "inércia" também ajuda
Menos é mais
- Quanto mais coisas mudam em um elemento durante a animação, maior o risco de parecer exagerado
- Se a opacidade vai de 0 para 1, experimente 0,4 em vez de 1. Se for mudar o tamanho, tente começar com uma escala só um pouco menor
- Na maioria dos casos, animações que fazem o elemento chegar ao seu lugar devem se mover entre 5 e 40 pixels
Evite os padrões do navegador
- Os navegadores trazem curvas embutidas como linear, ease, ease-in, ease-out e ease-in-out
- São práticas e úteis em algumas situações, mas são genéricas demais e acabam fazendo tudo parecer igual (como sites feitos com Bootstrap/Tailwind que acabam se parecendo entre si)
- Experimente usar os valores de autocompletar de curvas cubic-bezier no VS Code
- Ou abra as ferramentas de desenvolvedor do navegador e use o editor de curvas
Várias propriedades, vários easings
- Nem sempre isso é útil, mas quando você precisa alterar várias propriedades ao mesmo tempo (como transform e opacity)
- Às vezes aplicar a mesma curva cubic-bezier parece bom, mas na prática nem sempre funciona
- Uma curva que funciona bem para transform pode não combinar tão bem com fade
- Nesses casos, é melhor escolher easings diferentes para cada propriedade CSS
- Você pode separar animações
@keyframes por propriedade ou usar várias transições
- Para opacity, linear; para transform, cubic-bezier(.5, 0, .5, 1)
Use atrasos escalonados
- Ao fazer transição de vários elementos, não subestime o efeito de
animation-delay ou transition-delay
In sai, Out entra
- Existem três tipos de curva de easing
- ease in (começa devagar)
- ease out (termina devagar)
- in-out (mais rápido no meio e lento no começo e no fim)
- O ponto complicado das transições é que, muitas vezes, você quer que o in use ease-out e o out use ease-in
- Uma animação em que um elemento sai e outro entra parece uma única transição para o usuário, mas por dentro são duas transições
- O que está saindo deve desacelerar, então precisa de ease-in, e o que está entrando deve usar ease-out
Confie na aceleração por hardware
- Nem todas as propriedades CSS funcionam suavemente em todos os dispositivos e navegadores
- Propriedades que sempre podem usar aceleração por hardware
- transform (todas as variantes de translate, scale, rotate e até versões 3D)
- opacity
- Propriedades que podem usar aceleração por hardware em alguns casos
- certas propriedades de SVG
- filter (dependendo do navegador e do filtro)
- Canvas e WebGL também têm aceleração por hardware, mas isso não é tratado aqui
- Ou seja, para mover, redimensionar e girar, use sempre a propriedade CSS
transform
- Não altere diretamente o tamanho ou a posição do elemento, faça o que fizer
- Se você mudar diretamente propriedades que afetam o layout da página, como height, width, border, margin e padding, há risco de a página ficar visivelmente mais lenta
Use will-change quando necessário
- Em teoria, a animação deveria ser suave e ter bom desempenho, mas se ainda parecer artificial, use a propriedade
will-change
- Ela informa antecipadamente o que vai mudar, então alguns outros cálculos podem ser ignorados
Bônus: respeite as preferências do usuário
- O usuário pode indicar nas configurações do dispositivo se prefere "reduced motion"
- Você pode detectar esse valor com media queries ou via JavaScript e reagir de acordo
Ainda não há comentários.