CSSアニメーションが開始終了した時に処理を行う animationstart

.circle {
  width: 100px;
  height: 100px;
  background-color: aqua;
}

.circle.action {
  /* animation: act 1s infinite; */
  animation: act 1s;
}

@keyframes act {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="circle"></div>

const myRect = document.querySelector(".circle");
myRect.addEventListener("click", (e) => {
  e.target.classList.toggle("action");
});
myRect.addEventListener("animationstart", () => {
  console.log("アニメーションスタート");
});
myRect.addEventListener("animationiteration", () => {
  console.log("アニメーション繰返し開始");
});
myRect.addEventListener("animationend", () => {
  console.log("アニメーションエンド");
});

animationstart アニメーションが開始したことを検知する
animationiteration アニメーションの繰り返しが発生したことを検知する (infiniteが設定されている時発生)
animationend アニメーションが完了したことを検知する (infiniteが設定されている時発生しない)