javascript - JavaScript で CSS アニメーションの開始と終了をどのように検出しますか?

Question

私は JavaScript で要素をアニメーション化することに慣れていました。CSS3でやったほうが簡単だと思いました。

JavaScript を使用して、CSS アニメーションの開始と終了をどのように検出できますか? まったく方法はありますか？

Answer 1

適切なイベントを要素にバインドします。例：

el.addEventListener("animationstart", function() {}, false);
el.addEventListener("animationend", function() {}, false);
el.addEventListener("animationiteration", function() {}, false);

https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations#Using_animation_events

注：適切なプレフィックス付きイベントも追加する必要がある場合があります。例：webkitAnimationEnd