Animações CSS versus JavaScript

Você pode animar com CSS ou JavaScript. Qual usar e por quê?

Sam Thorogood

Há duas formas 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

  • Use animações CSS para transições "one-shot" mais simples, como alternar estados do elemento da interface do usuário.
  • Use animações JavaScript quando quiser efeitos avançados como pular, parar, pausar, retornar ou desacelerar.
  • Se você optar por animar com JavaScript, utilize a Web Animations API ou uma estrutura moderna com a qual esteja acostumado.

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

  • Use CSS quando tiver estados menores e autocontidos para elementos da interface do usuário. Transições e animações CSS são ideais para exibir um menu de navegação da lateral ou mostrar uma descrição. Você pode acabar usando o JavaScript para controlar os estados, mas as animações estarão no CSS.
  • Use JavaScript quando precisar de controle significativo sobre as animações. A API Web Animations é a abordagem baseada em padrões, disponível atualmente na maioria dos navegadores mais recentes. 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 JavaScript avançada, 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 quer que aconteça.

Abaixo está um exemplo de CSS que move um elemento 100px nos eixos X e Y. Para isso, use uma transição CSS definida para durar 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 saber mais sobre o easing, consulte o guia Os conceitos básicos de easing.

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

box.classList.add('move');

Isso proporciona um bom equilíbrio para seus apps. Você pode se concentrar em gerenciar o estado com JavaScript e apenas definir as classes adequadas nos elementos de destino, deixando o navegador lidar com as animações. Se escolher esse caminho, pode aguardar eventos transitionend no elemento, mas apenas se dispensar o suporte para versões mais antigas do Internet Explorer; a versão 10 foi a primeira versão com suporte para esses eventos. Todos os outros navegadores suportam o 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 de usar transições CSS, você também pode usar animações CSS, que permitem mais controle sobre quadros-chave de animação individuais, durações e interações.

Por exemplo, você pode animar a caixa da mesma forma que anima transições, mas precisará fazê-lo 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 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 de fornecedor. Várias ferramentas podem ajudar na criação de versões prefixadas do CSS, permitindo que você programe a versão não prefixada nos arquivos de origem.

Animar com JavaScript e a Web Animations API

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 para animar propriedades CSS específicas ou criar objetos de efeito combináveis.

Animações JavaScript são imperativas porque são programadas in-line como parte do código. Você também pode encapsulá-las dentro de outros objetos. Confira 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, animações da Web só modificam a apresentação de um elemento. Se quiser que seu objeto permaneça no local para onde ele foi movido, modifique os estilos subjacentes quando a animação for concluída, como é apresentado no nosso exemplo.

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 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 você pode desacelerar, pausar, parar e inverter animações e manipular elementos como quiser. Isso é especialmente útil se você estiver compilando aplicativos complexos orientados por objetos, porque é possível encapsular seu comportamento de forma adequada.