Que técnica de animação DOM você deve usar?

Você já viu três técnicas que permitem animar partes de sua página web: window.setInterval/setTimeout, window.requestAnimationFrame, and CSS animations/transitions.

Quando você está considerando que técnica usar, você deve considerar estas questões:

Quando criamos páginas web, estamos muito preocupados com a performance, então gostamos de considerá-la como um dos critérios mais importantes. Contudo, a performance do navegador muda quando novos navegadores surgem, e navegadores de dispositivos móveis podem funcionar de forma bem diferente dos navegadores de desktop, então a técnica com melhor performance hoje pode não ser a técnica com melhor performance amanhã. Currently, CSS animations/transitions are the most performant, then requestAnimationFrame, then setInterval.

Contudo, CSS não pode fazer tudo. Por exemplo, para desenhar pixels e formas em uma tag <canvas>, você precisa chamar funções como fillRect() e você não pode usar CSS. Você precisaria usar requestAnimationFrame ou setInterval para chamar essas funções periodicamente. Na verdade, é isso que fazemos aqui na Khan Academy, em nosso ambiente ProcessingJS. ProcessingJS is a JS library that writes out to a <canvas> tag, and if you define a draw() function in your code, then ProcessingJS uses setInterval to call that draw() function repeatedly based on the frameRate.

Às vezes, você quer chamar funções JavaScript periodicamente, mas não porque você queira animar alguma coisa na página. Você pode verificar atualizações de servidores, como o Twitter faz quando ele atualiza as notícias em tempo real. Nesse caso, você pode simplesmente usar setInterval, e não importa que a escolha não seja precisa, porque você o está chamando somente a cada minuto ou algo do tipo. É isso que fazemos na Khan Academy, na página de pedidos de ajuda, para verificar continuamente novos pedidos de ajuda a cada 2 minutos.

Claro, você deve ter em mente a compatibilidade do navegador. Se você está escrevendo um código que precisa funcionar no IE9, então você não pode usar requestAnimationFrame ou animações CSS. You need to use a combination of techniques that work across the browsers, or find a library that does that for you, like Velocity.js.

Há muito mais para aprender sobre essas técnicas. Siga esses links para aprender mais:

Bônus para os fãs do Doctor Who: um dos meus exemplos favoritos do poder das animações CSS3 é esta TARDIS animada.