v151 · javascript · web animations

Meet the animation object

Start a CSS animation and read the Animation object it produced — handed straight to your animationstart handler by event.animation.

slide
pulse
hue

What event.animation reported

Run an animation to inspect its Animation object.

How it works

box.addEventListener("animationstart", (event) => {
  // The Animation object that fired this event — a CSSAnimation.
  // Nullable in the spec (CSSAnimation?): guard it.
  const anim = event.animation;
  if (!anim) return;  // synthetic event, or pre-151 browser
  console.log(anim.constructor.name);        // "CSSAnimation"
  console.log(anim instanceof Animation);     // true
  console.log(anim.playState, anim.playbackRate, anim.currentTime);
  console.log(anim.effect.getComputedTiming().duration);
});

see also