Animações CSS versus JavaScript

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

Sam Thorogood

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

Resumo

  • Use animações CSS para transições "one-shot" mais simples, como alternar estados de elementos da interface.
  • Use animações JavaScript quando quiser ter efeitos avançados, como salto, parada, pausa, rebobinamento ou desaceleração.
  • Se você optar por animar com JavaScript, use a API Web Animations ou um framework moderno com que se sinta confortável.

A maioria das animações básicas pode ser criada com CSS ou JavaScript, mas a quantidade de esforço e tempo é diferente. Consulte também Performance de CSS x JavaScript. Cada uma tem seus prós e contras, mas estas são boas diretrizes:

  • Use o CSS quando tiver estados menores e independentes para elementos da interface. As transições e animações do CSS são ideais para trazer um menu de navegação pela lateral ou mostrar uma dica. Você pode usar o JavaScript para controlar os estados, mas as animações vão estar no CSS.
  • Use o JavaScript quando precisar de um controle significativo sobre as animações. A API Web Animations é a abordagem baseada em padrões, disponível atualmente na maioria dos navegadores modernos. Isso fornece objetos reais, ideais para aplicativos complexos orientados a objetos. O JavaScript também é útil quando você precisa parar, pausar, desacelerar ou reverter animações.
  • Use requestAnimationFrame diretamente quando quiser orquestrar uma cena inteira manualmente. Essa é uma abordagem avançada de JavaScript, mas pode ser útil se você estiver criando um jogo ou desenhando em uma tela 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 usar isso para suas animações.

Animar com CSS

Animar com CSS é a maneira mais simples de fazer algo se mover na tela. Essa abordagem é descrita como declarativa, porque você especifica o que quer que aconteça.

Confira abaixo um CSS que move um elemento 100px nos eixos X e Y. Isso é feito usando uma transição CSS definida para usar 500ms. Quando a classe move é adicionada, o valor transform é alterado 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 a transição suave, consulte o guia Noções básicas sobre transição suave.

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

box.classList.add('move');

Isso proporciona um bom equilíbrio aos seus apps. Você pode se concentrar no gerenciamento de estado com JavaScript e simplesmente definir as classes adequadas nos elementos de destino, deixando o navegador processar as animações. Se você seguir esse caminho, poderá detectar eventos transitionend no elemento, mas apenas se puder abrir mão do suporte a versões mais antigas do Internet Explorer. A versão 10 foi a primeira a oferecer suporte a esses eventos. Todos os outros navegadores já ofereciam suporte ao evento há algum tempo.

O JavaScript necessário para detectar o fim de uma transição é este:

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

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

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

Por exemplo, é possível animar a caixa da mesma forma com transições, mas sem interações do usuário, como cliques, e com repetições infinitas. Também é possível mudar 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 animação independentemente 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 do fornecedor. Muitas ferramentas podem ajudar a criar as versões prefixadas do CSS que você precisa, permitindo que você escreva a versão sem prefixo nos arquivos de origem.

Animar com JavaScript e a API Web Animations

A criação de animações com JavaScript é mais complexa do que escrever transições ou animações CSS, mas geralmente oferece muito mais poder aos desenvolvedores. Você pode usar a API Web Animations para animar propriedades CSS específicas ou criar objetos de efeito combináveis.

As animações JavaScript são imperativas, porque são escritas inline como parte do código. Também é possível encapsular esses objetos em outros. Confira abaixo o JavaScript que você precisa escrever 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 modificam apenas a apresentação de um elemento. Se você quiser que o objeto permaneça no local para onde foi movido, modifique os estilos subjacentes dele quando a animação terminar, conforme nossa amostra.

Faça um teste

A API Web Animations é um padrão relativamente novo do W3C. Ele tem suporte nativo na maioria dos navegadores modernos. Para navegadores modernos que não oferecem suporte, há um polyfill disponível.

Com as animações JavaScript, você tem controle total sobre os estilos de um elemento em cada etapa. Isso significa que você pode desacelerar animações, pausar, parar, reverter e manipular elementos como quiser. Isso é especialmente útil se você estiver criando aplicativos complexos e orientados a objetos, porque é possível encapsular seu comportamento corretamente.