Using the Web Animations API - Web APIs | MDN
▻https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API
The Web Animations API lets us construct animations and control their playback with JavaScript. This article will start you off in the right direction with fun demos and tutorials featuring Alice in Wonderland.
The Web Animations API opens the browser’s animation engine to developers and manipulation by JavaScript. This API was designed to underlie implementations of both CSS Animations and CSS Transitions, and leaves the door open to future animation effects. It is one of the most performant ways to animate on the Web where supported, letting the browser make its own internal optimizations without hacks, coercion, or Window.requestAnimationFrame().
With the Web Animations API, we can move interactive animations from stylesheets to JavaScript, separating presentation from behavior. We no longer need to rely on DOM-heavy techniques like writing CSS properties and scoping classes onto elements to control playback direction. And unlike pure, declarative CSS, JavaScript also lets us dynamically set values from properties to durations. For building custom animation libraries and creating interactive animations, the Web Animations API might be the perfect tool for the job.
Pour la mise au point/débogage de ces animations, la version de firebug fusionnée avec Firefox DevTools (à partir de Firefox 49, cf ▻https://blog.getfirebug.com/2016/06/07/unifying-firebug-firefox-devtools) propose « Animation Inspector », une console spécifique : cf ▻https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations
Pour aller plus loin : ▻https://hacks.mozilla.org/2016/08/animating-like-you-just-dont-care-with-element-animate
Pour la compatibilité avec les navigateurs ne supportant pas l’API Web Animations (Internet Explorer et Safari actuellement) : ▻https://github.com/web-animations/web-animations-js