A API Web Animations fornece primitivas poderosas para descrever animações imperativas de JavaScript. Mas o que isso significa? Saiba mais sobre os recursos disponíveis para você, incluindo demonstrações e codelabs do Google.
Contexto
Em essência, a API fornece o método Element.animate().
Vamos conferir um exemplo, que anima a cor do plano de fundo de vermelho para verde,
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
Esse método é suportado em todos os navegadores modernos, com um ótimo substituto do polyfill (falaremos mais sobre isso posteriormente). O suporte nativo para esse método e o objeto do player a ele foi disponibilizado como parte do Chrome 39. Ele também está disponível de forma nativa no Opera e está em desenvolvimento ativo para o Firefox. Esse é um primitivo poderoso que merece um lugar na sua caixa de ferramentas.
Codelabs
Um número crescente de codelabs está disponível para a API Web Animations. Eles são guias individualizados que demonstram conceitos diferentes na API. Na maioria destes codelabs, você vai aprimorar o conteúdo estático com efeitos de animação.
Estes codelabs e 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
Então, se você está começando agora, não precisa mais procurar.
Demonstrações
Se você está em busca de inspiração, confira as demonstrações de animações da Web (link em inglês) inspiradas no Material Design, com fonte hospedada no GitHub (link em inglês). Eles demonstram uma variedade de efeitos incríveis, e você pode ver o código-fonte de cada demonstração inline.
As demonstrações incluem uma galáxia em rotação colorida, a Terra em rotação ou até mesmo uma variedade de efeitos sobre um elemento simples.
Polyfill
Para garantir uma ótima compatibilidade em todos os navegadores modernos, use uma biblioteca de polyfill. A API Web Animations tem um polyfill disponível no momento que o leva a todos os navegadores mais recentes, incluindo Internet Explorer, Firefox e Safari.
Se você estiver se aventureiro, poderá usar o polyfill web-animations-next, que também inclui recursos que ainda não foram finalizados, como os construtores GroupEffect e SequenceEffect de composição.
Para ver uma comparação entre os dois polyfills, consulte a página inicial.
Há algumas opções para usar o polyfill no seu código.
Use uma CDN, como cdnjs, jsDelivr, ou segmente uma versão específica em rawgit.com.
Instalar via NPM ou Bower
$ npm install web-animations-js $ bower install web-animations-js ```
Em todos os casos, você pode simplesmente 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 as especificações do W3C.
Dan Wilson também escreveu um excelente conjunto de postagens sobre animações na Web, incluindo como usá-lo com a nova propriedade motion-path do CSS (link em inglês).
Para ver algumas amostras que usam motion-path, confira Eric Willigers doc.