A API Web Animations oferece primitivas poderosas para descrever animações imperativas do JavaScript, mas o que isso significa? Saiba mais sobre os recursos disponíveis, incluindo as demonstrações e os codelabs do Google.
Contexto
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 é aceito em todos os navegadores modernos, com uma ótima substituição de polyfill (mais informações mais adiante). O suporte nativo a esse método e ao objeto do player ficou disponível como parte do Chrome 39. Ela também está disponível de forma nativa no Opera e está em desenvolvimento ativo para Firefox. Essa é uma primitiva poderosa que merece um lugar na sua caixa de ferramentas.
Codelabs
Um número cada vez maior de codelabs está disponível para a API Web Animations. Esses são guias independentes que demonstram diferentes conceitos na API. Na maioria desses codelabs, você vai usar conteúdo estático e aprimorar com efeitos de animação.
Esses codelabs e os links ou recursos relacionados são o melhor lugar para começar se você quer 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:
Então, se você está começando, não procure mais!
Demonstrações
Se você estiver procurando inspiração, confira as demos de animações da Web inspiradas no Material Design, com a origem 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 girando ou até mesmo uma variedade de efeitos em um elemento simples.
Polyfill
Para garantir um bom suporte em todos os navegadores modernos, use uma biblioteca de polyfill. A API Web Animations tem um polyfill disponível que a leva a todos os navegadores modernos, incluindo o Internet Explorer, o Firefox e o Safari.
Se você quiser se aventurar, use o polyfill web-animations-next, que também inclui recursos que ainda não foram finalizados, como os GroupEffect e SequenceEffect combináveis.
Para comparar os dois polyfills, acesse a página inicial.
Para usar qualquer um dos polyfills no código, você tem algumas opções.
Use uma CDN, como cdnjs, jsDelivr ou segmente uma versão específica pelo rawgit.com
Instalar pelo NPM ou Bower
$ npm install web-animations-js $ bower install web-animations-js ```
Em todos os casos, basta incluir o polyfill em uma tag de 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 você 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 Web, incluindo como usá-las com a nova propriedade CSS motion-path.
Para conferir alguns exemplos que usam motion-path, consulte o documento de Eric Willigers.