A API Web Animations oferece primitivos poderosos para descrever animações imperativas em JavaScript. Mas o que isso significa? Conheça os recursos disponíveis, incluindo demonstrações e codelabs do Google.
Contexto
Basicamente, a API fornece o método Element.animate().
Confira um exemplo que anima a cor de fundo de vermelho para verde:
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
Esse método é compatível com todos os navegadores modernos, com um ótimo fallback de polyfill (mais sobre isso depois). O suporte nativo para esse método e o objeto do player dele se tornaram amplamente disponíveis como parte do Chrome 39. Ele também está disponível nativamente no Opera e em desenvolvimento ativo para o Firefox. Essa é uma primitiva poderosa que merece um lugar na sua caixa de ferramentas.
Codelabs
Um número crescente de codelabs está disponível para a API Web Animations. São guias autodidáticos que demonstram diferentes conceitos na API. Na maioria desses codelabs, você vai pegar conteúdo estático e melhorar com efeitos de animação.
Esses codelabs e os links ou recursos relacionados são o melhor lugar para começar se você quiser entender as novas primitivas disponíveis nas animações da Web. Para ter uma ideia do que você pode criar, confira este efeito de revelação inspirado no Android:
Se você está começando, não precisa procurar mais!
Demonstrações
Se você estiver procurando inspiração, confira as demonstrações de animações da Web inspiradas no Material, com fonte hospedada no GitHub. Elas demonstram uma variedade de efeitos incríveis, e você pode conferir o código-fonte de cada demonstração inline.
As demonstrações incluem uma galáxia colorida girando, a Terra em rotação ou até mesmo vários efeitos em um elemento simples.
Polyfill
Para garantir um ótimo suporte em todos os navegadores modernos, use uma biblioteca de polyfill. A API Web Animations tem um polyfill disponível agora que a leva para todos os navegadores modernos, incluindo Internet Explorer, Firefox e Safari.
Se você quiser algo mais avançado, use o polyfill web-animations-next, que também inclui recursos ainda não finalizados, como os construtores combináveis GroupEffect e SequenceEffect.
Para uma comparação entre os dois polyfills, consulte a página inicial.
Para usar qualquer um dos polyfills no seu código, você tem algumas opções.
Use uma CDN, como cdnjs, jsDelivr ou direcione uma versão específica usando rawgit.com.
Instalar usando NPM ou Bower
$ npm install web-animations-js $ bower install web-animations-js ```
Em todos os casos, basta incluir o polyfill em uma tag script antes de qualquer outro código:
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
<script>
document.body.animate([
{'background': 'red'},
{'background': 'green'}
], 1000);
</script>
Outros recursos
Se quiser ler uma introdução mais técnica, confira a especificação do W3C.
Dan Wilson também escreveu um ótimo conjunto de postagens sobre animações da Web, incluindo como usar junto com a nova propriedade motion-path do CSS.
Para conferir alguns exemplos usando motion-path, consulte o documento de Eric Willigers.