A API Web Animations oferece primitivos poderosos para descrever animações imperativas do JavaScript. Mas o que isso significa? Saiba mais sobre os recursos disponíveis, incluindo demonstrações e codelabs do Google.
Contexto
Essencialmente, a API fornece o método Element.animate().
Vamos ver 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 excelente substituto de polyfill (falaremos mais sobre isso posteriormente). O suporte nativo para esse método e o objeto do player foi disponibilizado amplamente no 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 (link em inglês). São guias de ritmo próprio que demonstram diferentes conceitos na API. Na maioria desses codelabs, você vai usar conteúdo estático e aprimorá-lo com efeitos de animação.
Estes codelabs e links ou recursos relacionados são o melhor ponto de partida se você quer entender os novos primitivos 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 agora, não precisa procurar mais!
Demonstrações
Se você está procurando inspiração, confira as demonstrações de animações da Web inspiradas em Material Design, com fonte hospedada no GitHub (link em inglês). Isso demonstra uma variedade de efeitos incríveis e é possível ver inline o código-fonte de cada demonstração.
As demonstrações incluem uma galáxia giratória colorida, a Terra em rotação ou até mesmo vários efeitos em um elemento simples e antigo.
Polielástico
Para garantir um ótimo suporte 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 modernos, incluindo Internet Explorer, Firefox e Safari.
Se você gosta de aventura, use o polyfill da 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 qualquer um dos polyfills no seu código.
Use uma CDN, como cdnjs, jsDelivr, ou direcione 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, 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 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 na Web, incluindo como usá-lo junto com a nova propriedade CSS motion-path.
Para alguns exemplos que usam motion-path, consulte o documento de Eric Willigers.