Animações CSS

As animações CSS oferecem uma forma sofisticada de aprimorar a experiência do usuário com transições e efeitos visuais suaves e atraentes. Neste guia completo, exploramos as nuances das animações CSS, fornecendo explicações detalhadas, exemplos e boas práticas para criar designs dinâmicos e responsivos.

Introdução às Animações CSS

As animações CSS permitem que desenvolvedores web animem elementos HTML sem depender de JavaScript. Elas são definidas usando keyframes, que especificam os estilos em vários pontos da sequência de animação.

Exemplo Básico de Animação CSS

<div class="animated-box"></div>

<style>
  .animated-box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: move 4s infinite;
  }

  @keyframes move {
    0% { transform: translateX(0); }
    50% { transform: translateX(200px); }
    100% { transform: translateX(0); }
  }
</style>

Principais Propriedades das Animações CSS

• animation-name: Especifica o nome dos keyframes.
• animation-duration: Define a duração da animação.
• animation-timing-function: Define a curva de velocidade da animação.
• animation-delay: Atrasa o início da animação.
• animation-iteration-count: Define o número de vezes que a animação deve ser reproduzida.
• animation-direction: Especifica se a animação deve ser reproduzida em sentido inverso em ciclos alternados.

Aplicando Múltiplas Animações

Você pode aplicar múltiplas animações a um único elemento separando-as com vírgulas.

<div class="multi-animated-box"></div>

<style>
  .multi-animated-box {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation: move 4s infinite, rotate 2s infinite;
  }

  @keyframes move {
    0% { transform: translateX(0); }
    50% { transform: translateX(200px); }
    100% { transform: translateX(0); }
  }

  @keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>

Técnicas Avançadas

Animações Responsivas

Certifique-se de que as animações sejam responsivas e se adaptem a diferentes tamanhos de tela.

<div class="responsive-box"></div>

<style>
  .responsive-box {
    width: 50vw;
    height: 50vw;
    background-color: green;
    animation: resize 4s infinite;
  }

  @keyframes resize {
    0% { width: 50vw; height: 50vw; }
    50% { width: 70vw; height: 70vw; }
    100% { width: 50vw; height: 50vw; }
  }
</style>

Combinando Transformações

Combine múltiplas propriedades de transformação para criar animações complexas.

<div class="complex-transform-box"></div>

<style>
  .complex-transform-box {
    width: 100px;
    height: 100px;
    background-color: yellow;
    animation: complexTransform 5s infinite;
  }

  @keyframes complexTransform {
    0% {
      transform: translateX(0) rotate(0deg) scale(1);
    }
    50% {
      transform: translateX(200px) rotate(180deg) scale(1.5);
    }
    100% {
      transform: translateX(0) rotate(360deg) scale(1);
    }
  }
</style>

Modos de Preenchimento de Animação

A propriedade animation-fill-mode define como uma animação CSS aplica estilos ao seu destino antes e depois de sua execução.

<div class="fill-mode-box"></div>

<style>
  .fill-mode-box {
    width: 100px;
    height: 100px;
    background-color: purple;
    animation: fillMode 3s forwards;
  }

  @keyframes fillMode {
    0% { background-color: purple; }
    100% { background-color: orange; }
  }
</style>

Atrasos e Funções de Temporização de Animação

Use atrasos de animação e funções de temporização para controlar o ritmo e o início das animações.

<div class="timing-function-box"></div>

<style>
  .timing-function-box {
    width: 100px;
    height: 100px;
    background-color: pink;
    animation: timingFunction 4s ease-in-out infinite;
  }

  @keyframes timingFunction {
    0% { transform: translateY(0); }
    50% { transform: translateY(200px); }
    100% { transform: translateY(0); }
  }
</style>

Boas Práticas para Animações CSS

1. Minimize o Uso de CPU: Mantenha as animações simples para evitar uso excessivo de CPU, o que pode degradar o desempenho, especialmente em dispositivos móveis.
2. Use Aceleração de Hardware: Use as propriedades transform e opacity para aproveitar a aceleração por GPU.
3. Fallbacks: Forneça estilos de fallback para navegadores que não suportam animações.
4. Testes de Desempenho: Teste as animações em diferentes dispositivos e navegadores para garantir um desempenho suave.

Exemplo de uma Animação Bem Otimizada

<div class="optimized-box"></div>

<style>
  .optimized-box {
    width: 100px;
    height: 100px;
    background-color: cyan;
    animation: optimizedMove 3s ease-in-out infinite;
  }

  @keyframes optimizedMove {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(200px) scale(1.2); }
    100% { transform: translateY(0) scale(1); }
  }
</style>

Controlando Animações CSS com JavaScript

O CSS cuida da renderização de uma animação de forma eficiente, mas não sabe quando uma animação deve ser executada ou o que deve acontecer depois que ela terminar. Essa lógica de decisão pertence ao JavaScript. O padrão mais comum é: defina a animação no CSS e deixe o JavaScript adicionar ou remover uma classe para iniciá-la ou pará-la.

Isso mantém a reprodução suave e acelerada por GPU no CSS enquanto o seu código permanece no controle do tempo e das ações subsequentes.

Iniciar e Parar com Alternância de Classe

Coloque a animação em uma classe em vez do seletor base e, em seguida, alterne essa classe:

<button id="play">Play</button>
<div id="box"></div>

<style>
  #box {
    width: 100px;
    height: 100px;
    background: teal;
  }
  /* The animation only runs while this class is present */
  #box.run {
    animation: slide 1s ease-in-out;
  }
  @keyframes slide {
    from { transform: translateX(0); }
    to   { transform: translateX(200px); }
  }
</style>

<script>
  const box = document.getElementById('box');
  document.getElementById('play').onclick = () => {
    // Toggle: add the class to play, the CSS animation does the rest
    box.classList.add('run');
  };
</script>

Como a animação está na classe .run, remover a classe a interrompe imediatamente e restaurá-la a reproduz novamente desde o início.

Ouvindo o Fim: transitionend e animationend

A principal vantagem de conduzir animações com JavaScript é que o navegador dispara eventos DOM aos quais você pode reagir. Isso permite encadear etapas, limpar classes ou executar código exatamente quando um efeito é concluído — sem adivinhações frágeis com setTimeout.

• Para transições CSS, o evento transitionend é disparado quando uma transição termina.
• Para animações CSS (@keyframes), três eventos são disparados: animationstart, animationiteration (uma vez por loop) e animationend.

<button id="fade">Fade out</button>
<div id="panel">Hello</div>

<style>
  #panel {
    width: 150px;
    padding: 20px;
    background: gold;
    transition: opacity 0.5s;
  }
  #panel.hidden { opacity: 0; }
</style>

<script>
  const panel = document.getElementById('panel');

  document.getElementById('fade').onclick = () => panel.classList.add('hidden');

  // Runs the moment the fade completes — not a guessed delay
  panel.addEventListener('transitionend', (event) => {
    console.log(`Transition of "${event.propertyName}" finished`);
    panel.style.display = 'none'; // safe to hide only now
  });
</script>

Quando a transição termina, o console exibe:

Transition of "opacity" finished

Lendo Detalhes do Evento: propertyName e animationName

Os eventos de animação carregam dados úteis. Quando várias propriedades ou animações estão envolvidas, você frequentemente precisa saber qual delas acabou de terminar.

• event.propertyName — a propriedade CSS que sofreu a transição (em transitionend).
• event.animationName — o nome dos @keyframes (nos três eventos de animação).
• event.elapsedTime — segundos de tempo de execução, excluindo qualquer animation-delay.

<div id="bouncer">Watch the console</div>

<style>
  #bouncer { animation: bounce 0.6s ease 3; }
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-30px); }
  }
</style>

<script>
  const el = document.getElementById('bouncer');

  el.addEventListener('animationstart', (e) =>
    console.log(`start: ${e.animationName}`));

  el.addEventListener('animationiteration', (e) =>
    console.log(`loop of ${e.animationName} at ${e.elapsedTime}s`));

  el.addEventListener('animationend', (e) =>
    console.log(`end: ${e.animationName} (total ${e.elapsedTime}s)`));
</script>

Com animation: bounce 0.6s ease 3 (três iterações), o console exibe start, dois eventos animationiteration (loops 2 e 3 começam) e, em seguida, end em 1.8s no total.

JS Controlando vs. CSS Controlando: Qual Escolher?

Um híbrido prático é o melhor dos dois mundos: o CSS descreve o efeito, o JavaScript decide quando ele é executado e o que acontece a seguir por meio dos eventos acima. Quando você realmente precisar de controle por quadro, recorra a animações JavaScript com requestAnimationFrame, ou à Web Animations API para criar e controlar animações inteiramente em código.

Conclusão

As animações CSS são uma ferramenta poderosa para criar experiências web dinâmicas e envolventes. Ao dominar keyframes, propriedades de animação e técnicas avançadas, os desenvolvedores podem produzir animações de nível profissional que aprimoram a interação do usuário. Experimente diferentes animações, teste minuciosamente e siga as boas práticas para obter os melhores resultados.

Prática