Animações CSS versus JavaScript

É possível animar com CSS ou JavaScript. Qual usar e por quê?

Sam Thorogood

Existem duas maneiras principais de criar animações na Web: com CSS e com JavaScript. A forma escolhida depende das outras dependências do projeto e dos tipos de efeitos que você quer alcançar.

Resumo

  • Usar animações CSS para uma experiência mais simples transições, como alternar estados do elemento da interface.
  • Use animações JavaScript quando quiser efeitos avançados como pular, parar, pausar, retroceder ou desacelerar.
  • Se você optar por animar com JavaScript, use a API Web Animations ou uma estrutura moderna com a qual esteja confortável.

A maioria das animações básicas pode ser criada com CSS ou JavaScript, mas o esforço e o tempo necessários serão diferentes (veja também Desempenho de CSS vs JavaScript). Cada uma tem seus prós e contras, mas as diretrizes gerais são:

  • Use CSS quando tiver estados menores e independentes para elementos da interface. As transições e animações CSS são ideais para exibir um menu de navegação da lateral ou mostrar uma dica. Você pode acabar usando JavaScript para controlar os estados, mas as animações estarão no seu CSS.
  • Use JavaScript quando precisar de controle significativo sobre as animações. A API Web Animations é a abordagem baseada em padrões, disponível hoje na maioria dos navegadores modernos. Isso fornece objetos reais, ideais para aplicativos complexos orientados por objetos. O JavaScript também é útil quando você precisa parar, pausar, desacelerar ou inverter suas animações.
  • Use requestAnimationFrame diretamente quando quiser orquestrar uma cena inteira manualmente. Essa é uma abordagem avançada de JavaScript, mas ela pode ser útil se você estiver criando um jogo ou desenhando em um canvas HTML.

Como alternativa, se você já estiver usando um framework JavaScript que inclui a funcionalidade de animação, como o método .animate() do jQuery ou o TweenMax do GreenSock, talvez seja mais conveniente manter essa opção nas suas animações.

Animar com CSS

Animar com CSS é a forma mais simples de fazer algo se mover na tela. Essa abordagem é descrita como declarativa, porque você especifica o que gostaria que acontecesse.

Abaixo está um CSS que move um elemento 100px nos eixos X e Y. Para isso, use uma transição CSS definida para usar 500ms. Quando a classe move é adicionada, o valor transform é modificado e a transição começa.

.box {
  transform: translate(0, 0);
  transition: transform 500ms;
}

.box.move {
  transform: translate(100px, 100px);
}

Faça um teste

Além da duração da transição, há opções de easing, que é basicamente a sensação da animação. Para mais informações sobre easing, consulte o guia Noções básicas de easing.

Se, como no snippet acima, você criar classes CSS separadas para gerenciar suas animações, poderá usar o JavaScript para ativar e desativar cada animação:

box.classList.add('move');

Isso proporciona um bom equilíbrio para seus aplicativos. Você pode se concentrar em gerenciar o estado com JavaScript e simplesmente definir as classes adequadas nos elementos de destino, deixando o navegador lidar com as animações. Se você seguir esse caminho, poderá ouvir eventos transitionend no elemento, mas somente se não oferecer mais suporte para versões mais antigas do Internet Explorer. a versão 10 foi a primeira a dar suporte a esses eventos. Todos os outros navegadores são compatíveis com esse evento há algum tempo.

O JavaScript necessário para detectar o final de uma transição tem esta aparência:

var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
    // Handle the transition finishing.
}

Além de usar transições CSS, você também pode usar animações CSS, que permitem ter muito mais controle sobre frames-chave, durações e iterações de animação individuais.

Você pode, por exemplo, animar a caixa da mesma forma com transições, mas sem qualquer interação do usuário, como cliques, e com infinitas repetições. Também é possível alterar várias propriedades ao mesmo tempo.

.box {
  animation-name: movingBox;

  animation-duration: 1300ms;

  animation-iteration-count: infinite;

  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  }

  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
  }
}

Faça um teste

Com animações CSS, você define a própria animação de forma independente do elemento de destino e usa a propriedade animation-name para escolher a animação necessária.

Se você quiser que suas animações CSS funcionem em navegadores mais antigos, será necessário adicionar prefixos de fornecedor. Muitas ferramentas podem ajudá-lo a criar as versões prefixadas do CSS de que você precisa, permitindo que você escreva a versão não prefixada em seus arquivos de origem.

Animar com JavaScript e a API Web Animations

Criar animações com JavaScript é, em comparação, mais complexo do que escrever transições ou animações CSS, mas normalmente proporciona aos desenvolvedores muito mais poder. Você pode usar a API Web Animations (link em inglês) para animar propriedades CSS específicas ou criar objetos de efeito combinável.

Animações JavaScript são imperativas porque são programadas in-line como parte do código. Também é possível encapsulá-los dentro de outros objetos. Veja abaixo o código JavaScript necessário para recriar a transição CSS descrita anteriormente:

var target = document.querySelector('.box');
var player = target.animate([
    {transform: 'translate(0)'},
    {transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
    target.style.transform = 'translate(100px, 100px)';
});

Por padrão, as animações da Web só modificam a apresentação de um elemento. Se você quiser que seu objeto permaneça no local para onde foi movido, modifique seus estilos subjacentes quando a animação terminar, de acordo com nosso exemplo.

Faça um teste

A API Web Animations é um padrão relativamente novo do W3C. Ela tem suporte nativo na maioria dos navegadores mais recentes. Para navegadores modernos incompatíveis, um polyfill está disponível.

Com animações JavaScript, você tem controle total sobre os estilos de um elemento em cada etapa. Isso significa que é possível desacelerar, pausar, parar, inverter animações e manipular elementos como você achar adequado. Isso é especialmente útil se você estiver compilando aplicativos complexos orientados por objetos, porque é possível encapsular seu comportamento de forma adequada.