アニメーションイベントを拾う

アニメーションイベントを拾うことが出来るイベントを見つけたので、メモします。
参考コードを貼っておきます。
ブラウザの対応状況を確認して使用します。

<p class="animation">右から流れてくるアニメーション</p>
<button class="applyAnimation" type="button">スタート！</button>

.animation.active {
  animation-duration: 2s;
  animation-name: slidein;
  animation-iteration-count: 4;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

const animation = document.querySelector('.animation');
const applyAnimation = document.querySelector('.applyAnimation');
let count = 1;

applyAnimation.addEventListener("click", () => {
  animation.classList.toggle("active");
});
// アニメーションが始まったとき
animation.addEventListener("animationstart", () => {
  console.log('始まったよ！');
});
// アニメーションが繰り返されており、2回目が始まったとき
animation.addEventListener("animationiteration", () => {
  console.log(`${count++}回目`);
});
// アニメーションが終わったとき
animation.addEventListener("animationend", () => {
  count = 1;
  console.log('終わったよ！');
});
// アニメーションがキャンセルされたとき
animation.addEventListener("animationcancel", () => {
  console.log('止まっちゃった');
});

参考