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 escolha depende das outras dependências do projeto e dos tipos de efeitos que você está tentando alcançar.

Resumo

  • Use animações CSS para transições "únicas" mais simples, como alternar estados de elementos da interface.
  • Use animações em JavaScript quando quiser efeitos avançados, como pular, parar, pausar, voltar ou desacelerar.
  • Se quiser animar com JavaScript, use a API Web Animations ou um framework moderno com o qual você 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 necessários é diferente (consulte também Desempenho de CSS vs JavaScript). Cada linguagem tem seus prós e contras, mas estas são boas diretrizes:

  • Use CSS quando tiver estados menores e independentes para elementos da interface. As transições e animações CSS são ideais para mostrar um menu de navegação na lateral ou mostrar uma dica. Você pode acabar usando 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 modernos. Isso fornece objetos reais, ideais para aplicativos complexos orientados a objetos. O JavaScript também é útil quando é preciso parar, pausar, desacelerar ou inverter as animações.
  • Use requestAnimationFrame diretamente quando quiser orquestrar uma cena inteira manualmente. Essa é uma abordagem JavaScript avançada, 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 de JavaScript que inclui funcionalidade de animação, como o método .animate() do jQuery ou o TweenMax do GreenSock, talvez seja mais conveniente usar esse recurso para suas animações no geral.

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 muda 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 o resultado da animação. Para obter 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, use 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 no gerenciamento do 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á detectar eventos transitionend no elemento, mas somente se deixar de oferecer suporte a versões mais antigas do Internet Explorer. A versão 10 foi a primeira versão a dar suporte a esses eventos. Todos os outros navegadores são compatíveis com o evento há algum tempo.

O JavaScript necessário para detectar o final de uma transição é semelhante ao seguinte:

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ções 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 repetições infinitas. Você também pode 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 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 fornecedores. Muitas ferramentas podem ajudar 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 é mais complexo do que programar transições ou animações CSS, mas normalmente fornece aos desenvolvedores muito mais poder. Você pode usar a API Web Animations para animar propriedades CSS específicas ou criar objetos de efeito combinável.

As animações em JavaScript são imperativas, porque são programadas inline como parte do código. Também é possível encapsulá-los dentro de outros objetos. Confira abaixo o 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 modificam apenas a apresentação de um elemento. Se quiser que o objeto permaneça no local para o qual foi movido, modifique seus estilos subjacentes quando a animação terminar, conforme 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 mais recentes. Para navegadores mais recentes que não são compatíveis, há um polyfill 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, interromper, inverter e manipular as animações como quiser. Isso é especialmente útil se você estiver compilando aplicativos complexos orientados a objetos, pois é possível encapsular seu comportamento de forma adequada.