v147 · CSS · demo

Animation Origin Tracker

CSS animations fire simultaneously on elements and their ::before / ::after pseudo-elements. The animationend listener reads event.pseudoTarget to attribute each event without any extra DOM wrappers.

⟳ Checking support…
Card A
::before dot badge
Card B
::after arrow badge
Card C
::before colour bar
animationend events
Press "Run animations" to start.
// Chrome 147 — pseudoTarget on animationend
document.querySelectorAll('.actor').forEach(el => {
  el.addEventListener('animationend', event => {
    const pseudo = event.pseudoTarget; // CSSPseudoElement | null

    if (pseudo) {
      console.log(`animationend from ${pseudo.type} of #${el.id}`);
      // pseudo.type: '::before' or '::after'
    } else {
      console.log(`animationend from #${el.id} (the element itself)`);
    }
  });
});

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗