MENU


Web Animations API

The Web Animations API (Widely available) exposes the engine behind CSS animations (Animation Properties). element.animate(keyframes, options) returns an Animation to pause(), reverse() or cancel(), seek with currentTime, and await through finished.

One keyframe animation paused at 0, 500 and 1000 msHTMLLive
<style>b { display: block; width: 40px; height: 24px; margin: 6px; }</style>
<b></b><b></b><b></b>
<script>
  const keyframes = { transform: ['none', 'translateX(300px) rotate(90deg)'],
                      background: ['#1565c0', '#ef6c00'] };
  document.querySelectorAll('b').forEach((box, i) => {
    const anim = box.animate(keyframes, { duration: 1000, easing: 'ease-in-out', fill: 'both' });
    anim.pause();
    anim.currentTime = i * 500;
  });
</script>
Browser output of Listing 9.46
Browser output of 46

document.getAnimations() includes CSS animations, so one loop pauses them all; commitStyles() keeps the final frame. Motion 153,286 (https://github.com/motiondivision/motion 33,758 ) (MIT) adds springs and sequences on top.