10 dicas para melhores animações e transições CSS

Há certas coisas que você simplesmente sabe quando as experimenta, mesmo que não saiba de onde vem a intuição ou não consiga colocar em palavras exatamente o que você reconhece.

Você pode não saber nada sobre interiores, mas sente quando está em um espaço bem projetado.

Da mesma forma, você provavelmente conseguirá distinguir um bom site/app de um ruim, mesmo que não consiga explicar exatamente o que faz um ser melhor que o outro.

Da mesma forma: os visitantes podem não perceber o que há nas transições ou animações em nossos sites e aplicativos, mas podem identificar com precisão a diferença entre o que é bom e o que é ruim; eles sabem intuitivamente quando o movimento é bom e quando a impressão é genérica ou pouco polida, mesmo que não consigam explicar como ou por quê.

Então, para entender melhor um dos fatores que causa essas impressões (e como evitar as ruins ao construir suas próprias UIs), veja essa lista com 10 dicas para melhores animações e transições CSS.

Caso queira fazer uma revisão sobre transições/animações em CSS, confira nosso minicurso de animações CSS:

1. Deixe mais curto do que você acha que deveria ser

A primeira das dicas para melhores animações e transições CSS passa por uma questão que todos nós, em algum momento, passamos.

Se você dedicou seu tempo e esforço para criar uma ótima transição, você quer aproveitá-la. Se você for como eu (e a maioria dos outros desenvolvedores), você pode até ficar sentado admirando sua animação, observando-a transitar de um lado para o outro com deleite. Mas tem um problema aí.

A pista número 1 de animações mal projetadas é que elas duram muito tempo.

A grande maioria dos visitantes não são tão apaixonados — e, portanto, não tão pacientes — quanto você. Eles vieram para fazer algo e não estão interessados em esperar mais do que o necessário, por mais legal que seja.

Um bom conselho é: fazer com que animações/transições sejam o mais rápido possível, mas não tão rápidas que não consigam ser notadas. Como regra geral, provavelmente, a maioria das transições simples funciona melhor em algum lugar na faixa entre 150 a 400 milissegundos. Se você tiver transições consecutivas — à medida que um elemento sai, outro entra em seguida, por exemplo –, pode dobrar esse tempo e adicionar um pouco a mais entre eles também — para 2 animações separadas não acontecerem muito rapidamente.

A pista número 1 de animações mal projetadas é que elas duram muito tempo. Tuitar isso

Continue fazendo-as mais rápidas até parecer muito rápido; depois, desacelere um pouco.

Dito isto, porém, sempre há exceções, e quanto maior for a mudança na página, mais perceptível será a transição. Há uma grande diferença entre, digamos, uma pequena animação de destaque para a atualização do número de itens em seu carrinho e a transição de uma página inteira. Não deixe que grandes mudanças passem rápido demais.

Um último ponto digno de nota: uma animação nem sempre parece tão longa quanto realmente é. Uma transição com uma easing muito lenta pode parecer que não começa imediatamente; por outro lado, uma transição com “cauda longa” pode parecer concluída antes de tecnicamente o ser.

Nestes casos, percepção é realidade, portanto, a sensação da mudança é mais importante do que a duração técnica no código.

2. Combine a curva com a ação

É certo que é mais fácil falar do que fazer. Você pode estar dizendo “OK, ótimo, mas como posso realmente saber que tipo de curva bézier usar em qualquer situação”?

A resposta insatisfatória é: tentativa e erro (também conhecido como experiência).

O movimento é tão subjetivo quanto a cor. E tão importante quanto. É uma parte fundamental da sensação e da marca do seu site ou aplicativo web.

Dito isso, há um truque a ser lembrado: ao fazer tentativas, pense no movimento do mundo real e compare-o com o movimento com o qual você está trabalhando. Será esta transição uma confirmação positiva, aparecendo e deslizando? Isso pode exigir uma animação com chegada rápida e continuação mais suave, como um ajudante ansioso correndo para relatar que sua tarefa foi concluída.

Que tal uma mensagem de falha aparecendo na tela? Pode cair bem uma curva com easing mais lenta, para indicar uma ligeira relutância.

O movimento é tão subjetivo quanto a cor. E tão importante quanto. É uma parte fundamental da sensação e da marca do seu site ou aplicativo web. Tuitar isso

Se for algo importante que deva ser conhecido imediatamente, a velocidade e a aparência seriam uma prioridade. Se for altamente crítico, pode até exigir um movimento mais agressivo (como sacudir), para transmitir a severidade e chamar a atenção quando necessário.

Portanto, uma boa recomendação é: invista tempo e pergunte se o movimento transmite a sensação adequada. Esse movimento parece consistente com a marca do produto ou página e seu propósito?

3. Acelerar e desacelerar

No mundo real, praticamente nunca vemos qualquer tipo de movimento saltar imediatamente para a velocidade máxima ou parar completamente instantaneamente. Portanto, UIs parecerão um pouco mais “reais” e intuitivas quanto não usam curvas que também criam esse tipo de movimento.

Quando algo parece estranho em uma animação, pode ser porque ela começa ou termina de forma repentina e não natural.

Para qualquer uma dessas dicas para melhores animações e transições CSS, uma dica extra bem interessante é pensar como seria o comportamento de uma “coisa” se deslocando no mundo real.

Mesmo que seja sutil, recomenda-se adicionar um pouco de suavização às curvas cubic-bezier. Essa pequena (mas perceptível) aceleração e/ou desaceleração pode ser a diferença entre uma transição que parece suave e outra que parece um pouco “errada”.

Uma observação importante sobre partidas e paradas repentinas: tudo bem se o usuário não puder ver. Se o objeto em questão aparecer gradualmente, um início repentino pode ser adequado (já que o início da animação não será perceptível de qualquer maneira).

O mesmo acontece ao contrário: se um elemento estiver desaparecendo até opacity: 0, por exemplo, então pode não importar exatamente como a curva de transição termina, já que ela não será visível no final.

4. Menos é mais

Muitas dessas dicas para melhores animações e transições CSS poderiam muito bem ser resumidas como “menos é mais”.

É fácil se deixar levar e animar cada coisa na página. Mas, a menos que este seja o seu site pessoal e você sinta vontade de fazer bastante experimentos, em geral, muito movimento faz mais mal do que bem. Quando se trata de fazer transição de coisas com CSS, subestimar geralmente é melhor do que exagerar.

Quanto mais um elemento muda durante uma animação, mais a transição corre o risco de parecer exagerada.

Por exemplo, se você estiver animando opacity de 0 a 1 (ou vice-versa), tente um intervalo menor, como 0.4 a 1. Se o elemento aumentar para o tamanho total, tente torná-lo um pouco menor no início, em vez de tão pequeno que não possa ser visto.

Um elemento desliza para algum lugar? Na maioria dos casos, movimentos como esse devem estar na faixa entre 5 a 40 pixels. Menos do que isso, o movimento pode ser sutil demais para ser notado; muito mais, e um deslizamento suave pode se tornar uma queda desajeitada.

Quanto mais um elemento muda durante uma animação, mais a transição corre o risco de parecer exagerada. Tuitar isso

Aqui está um exemplo de transição que anima opacidade, posicionamento e tamanho. Compare a primeira animação, pronunciada e prolongada (laranja), com a mesma transição, mas atenuada e um pouco mais rápida (azul).

See the Pen Big vs subtle animation by Josh Collinsworth (@collinsworth) on CodePen.

Fazer demais pode ser pior do que não fazer nada. Portanto, encontre o ponto em que a transição é suficiente para ser eficaz e, se for além, faça com cautela.

5. Evite padrões do navegador

Você já deve saber que o navegador tem algumas curvas de atenuação (easings) padrão disponíveis para uso: linear, ease, ease-in, ease-out e ease-in-out.

No entanto, embora essas 5 timing functions nomeadas sejam convenientes e úteis em algumas situações, elas também são muito genéricas. Muitas das animações incorporadas em ferramentas e bibliotecas on-line são “vítimas” da mesma homogeneidade, mesmo que ofereçam uma gama mais ampla de opções.

Se quiser tirar o máximo proveito do movimento, você deve ir além das opções nomeadas mais comuns e disponíveis por default.

Assim como um site desenvolvimento Bootstrap ou Tailwind sem customizações corre o risco de parecer genérico, curvas easing prontas para uso muitas vezes podem fazer as UIs parecerem insípidas e homogêneas.

O VS Code, por exemplo, possui um preenchimento automático incrível para curvas cubic-bezier com uma ampla gama de opções; comece a digitar “cube-bezier” em um contexto CSS e você verá o seguinte menu suspenso:

Outra excelente opção: abra as ferramentas de desenvolvimento do seu navegador e brinque com as curvas de easing.

Todos os principais navegadores possuem um painel de easing disponível como sandbox para experimentar diferentes opções e fazer ajustes. Para acessá-lo, abra as dev tools e clique no ícone de curva próximo a um valor de bezier cúbico no painel de estilos CSS — o ícone varia, mas o fluxo de trabalho é basicamente idêntico em todos os navegadores.

Independentemente de como você decidir definir suas curvas de atenuação, reserve algum tempo para fazer ajustes sutis. Use cubic-bezier e não tenha medo de mexer.

Provavelmente, você não limitaria sua paleta de cores apenas às cores nomeadas predefinidas de CSS. Portanto, talvez você também não queira limitar suas transições a um pequeno punhado de curvas predefinidas.

6. Múltiplas propriedades, múltiplas easings

Essa próxima dica para melhores transições e animações CSS é muito boa, já que é bastante comum ter que animar mais de uma propriedade ao mesmo tempo em um único elemento, como, por exemplo, manipular a aparência um elemento com transform enquanto sua opacity também muda.

É possível aplicar a mesma curva cubic-bezier a ambas as propriedades, conforme mostrado aqui:

Dependendo do caso, a animação até pode ficar interessante. No entanto, haverá situações em que a mesma curva não funcionará para todas as propriedades que estão sendo transicionadas.

A curva de easing que funciona bem para transform pode não parecer adequada para o fade. É aí que se torna útil definir easings exclusivas por propriedade CSS.

Nesses casos, você pode dividir as animações @keyframes por propriedade ou especificar várias transições. Então, especificar uma curva diferente para cada propriedade, já que tanto transition, quanto animation, podem aceitar vários valores:

Aqui está uma demonstração: à medida que as caixas entram e saem alternadamente, observe como a opacidade e a escala seguem a mesma aceleração para o quadrado à esquerda; à direita, entretanto, a opacidade segue sua própria curva linear.

See the Pen Varying easings per property by Josh Collinsworth (@collinsworth) on CodePen.

Qual é o melhor? Bem, tudo isso depende do efeito buscado.

Você pode até mudar a duração de cada propriedade, mas tome cuidado para que as coisas não saiam de sincronia e as animações/transições não comecem a ficar ruins.

7. Use staggered delays (atrasos escalonados)

Ao fazer a transição de vários elementos (ou de um elemento com muitas partes), não subestime o efeito que animation-delay ou transition-delay podem ter, especialmente quando escalonados (staggered).

Dê uma olhada neste exemplo, em que cada linha usa um novo tipo de atraso de animação para criar um efeito diferente:

See the Pen Play more with delay by Josh Collinsworth (@collinsworth) on CodePen.

No pen acima, a primeira linha faz a transição de uma só vez. Tudo bem, mas não particularmente nítido.

Em cada linha seguinte, no entanto, vários graus de delay são aplicados a cada letra, para criar um efeito divertido de “bounce-in”. Tem até um que vai para trás e que faz com que a linha apareça do meio para fora.

No entanto, lembre-se de que menos é mais. É muito fácil exagerar em animações como essa, especialmente quando há muitos elementos em transição.

Existem oportunidades para aplicar este efeito numa escala mais sutil. Pontos em uma tela de carregamento, talvez? Talvez quando uma drawer ou hamburger menu é aberto, cada item apareça com um pequeno atraso?

Novamente, seja breve e sutil. Quando bem aplicados, staggered delays podem ajudar a levar as transições Web a outro nível.

8. Entradas saem, saídas entram

Se você observou vários tipos de curvas easing, deve ter notado que elas tendem a vir em três variedades: ease in (começa mais devagar), ease out (termina mais lentamente) e in-out (aplica ambas sendo rápida no meio e mais lento no início e no final).

O complicado com as transições é: muitas vezes você deseja que sua transição de entrada seja ease-out e que sua transição de saída seja ease-in.

Para ficar mais claro, digamos que você tenha uma animação em que um elemento sai da página enquanto outro parece tomar seu lugar, como uma transição de página ou deslizando entre duas imagens em uma lightbox.

A pessoa percebe isso como uma transição de UI, mas, nos bastidores, na verdade são 2 transições: a saída do elemento antigo, seguida pela entrada do novo elemento.

Isso significa que se você estiver fazendo a transição de saída de um elemento e quiser que ele comece lentamente, você precisa usar ease in. Por outro lado, quando um elemento está em transição de chegada, ele geralmente deve parar gradualmente, o que tem mais a ver com ease out.

O uso combinado desses 2 se juntariam para criar o efeito de um movimento contínuo mais elaborado e mais sofisticado que usar somente uma das funções de easings para ambos, entrada e saída.

Como já dissemos em outros artigos e vídeos de nosso canal no YouTube, uma excelente dica para melhores animações e transições CSS é prestar atenção em detalhes de easings e tempo de animação diferentes para cada tipo de animação.

9. Tire vantagem da aceleração de hardware

Nem todas as propriedades CSS podem ser animadas ou transicionadas sem problemas em todos os dispositivos e navegadores. Na verdade, apenas alguns são capazes de aproveitar a aceleração de hardware de um dispositivo para obter as transições mais suaves e com a taxa de quadros (framerate) mais alta possível.

Algumas propriedades que sempre podem ser aceleradas por hardware (existem outras):

• transform
• opacity
• scale
• translate
• rotate

Algumas propriedades que às vezes podem ser aceleradas por hardware (existem outras):

• filter
• Algumas propriedades de SVG

O tl;dr desses itens é: se você deseja mover, dimensionar, girar ou alterar a opacidade um elemento, sempre use a propriedade CSS transform (ou as propriedades isoladas) e opacity.

Mas, aconteça o que acontecer, evite alterar diretamente o tamanho ou o posicionamento de um elemento. Se você alterar uma propriedade que possa afetar o layout dos elementos da página — height, width, border, margin, padding etc. –, você corre o risco de tornar a página visivelmente mais lenta com os cálculos necessários para fazer essa alteração.

Se você precisar dessas propriedades animadas, teste em todos os dispositivos e navegadores possíveis. Geralmente, o Safari, em particular, é muito ruim no processamento de animações com bom desempenho por padrão, especialmente no iOS. O Firefox não fica muito atrás, mas você pode não perceber se estiver testando apenas em dispositivos de alta potência — grande parte do mundo vive de Androids baratos; não deixe isso de fora dos seus testes.

10. Use will-change conforme necessário

Se você tiver problemas com animações que deveriam ser suaves e de bom desempenho na teoria, mas que parecem instáveis ​​ou afetadas na prática, use a propriedade will-change.

Sem entrar muito em detalhes técnicos, will-change permite informar ao navegador o que vai mudar (daí o nome), para que ele possa pular outros cálculos. É como avisar com antecedência ao restaurante que todo o seu grupo fará pedidos apenas de um menu limitado; economiza tempo, permitindo que a cozinha/navegador saiba no que focar e com o que não precisa se preocupar.

Um exemplo: se você tiver certeza de que a única coisa que vai mudar em um elemento é sua propriedade transform e puder informar ao navegador com antecedência por meio de will-change: transform, ele poderá pular com segurança todas as outras etapas necessárias para a animação ocorrer da maneira mais suave possível.

No entanto, will-change não é uma solução mágica. Na verdade, se usado em excesso, pode prejudicar o desempenho.

Algumas fontes chegam ao ponto de recomendar a aplicação de will-change antes de uma animação ou transição e, em seguida, removê-la posteriormente.

Então, aqui novamente, o melhor conselho é: teste minuciosamente.

Dica bônus: respeite as preferências do visitante

Agora uma dica bônus para melhores animações e transições CSS — dica, aliás, que mostra um cuidado e atenção que podem fazer um código passar de amador para profissional.

As pessoas podem indicar nas configurações do dispositivo se preferem movimento reduzido (reduced motion).

As razões pelas quais alguém prefira fazer isso são muitas e variadas. Para começar, há uma série de razões médicas: a pessoa pode sentir vertigens, náuseas ou até convulsões quando exposta a movimentos excessivos — ou, simplesmente, achar que muito movimento distrai ou é desagradável.

Realmente, não importa o porquê; de qualquer maneira, é nosso trabalho como desenvolvedores, acomodar/adaptar o projeto às preferências dos visitantes (caso especificado nos requisitos).

É possível fazer isso através de uma media feature:

Ou usando JavaScript. Neste exemplo, verificando uma preferência de movimento reduzido e adicionando uma classe à tag <html> para servir de seletor nas folhas de estilo:

E lembre-se que movimento reduzido não significa necessariamente ausência de movimento, ou mesmo nenhuma animação.

Além disso, existem algumas situações em que pode ser melhor manter o movimento intacto. Por exemplo, se você mostrar uma barra de progresso conforme algo é carregado em segundo plano, essa é uma informação importante na UI.

Em vez de eliminar totalmente esse indicador, considere encontrar uma maneira de tornar o movimento mais sutil e discreto.

Conclusão

Esse pen reúne todas as dicas deste artigo para mostrar que a sensação de uma transição de UI pode ser bastante melhorada.

See the Pen Animation tips visualized by Josh Collinsworth (@collinsworth) on CodePen.

Perceba como ambos os lados têm essencialmente a mesma animação; as caixas são dimensionadas, movidas e esmaecidas em ambos os casos. Mas os detalhes dessa transição transformam completamente o efeito (sem trocadilhos).

Então, essas foram as 10 dicas para melhores animações e transições CSS:

1. Deixe mais curto do que você acha que deveria ser;
2. Combine a curva com a ação;
3. Acelerar e desacelerar;
4. Menos é mais;
5. Evite padrões do navegador;
6. Múltiplas propriedades, múltiplas easings;
7. Use staggered delays (atrasos escalonados);
8. Entradas saem, saídas entram;
9. Tire vantagem da aceleração de hardware;
10. Use will-change conforme necessário;
11. Dica bônus: respeite as preferências do visitante.

Se você gosta do assunto, confira também nossos artigos sobre Animação CSS e nossos artigos sobre Motion UI.