css3アニメーションの監視と一時停止

アニメーション クラスを要素に追加した後も、次のアクションを遅らせるために settimeout を使用しているのは、間違いなく大げさな知識ポイントです。

1.アニメーション アニメーションのモニタリング

-webkit-animation アニメーションには、実際には 3 つのイベントがあります:
開始イベント webkitAnimationStart
終了イベント webkitAnimationEnd
リピート モーション イベント webkitAnimationIteration

dom.addEventListener("webkitAnimationStart", function(){ //动画开始时事件 
    console.log("start"); 
}, false); 
dom.addEventListener("webkitAnimationEnd", function(){ //动画结束时事件 
    console.log("end"); 
}, false); 
dom.addEventListener("webkitAnimationIteration", function(){ //动画重复运动时的事件
    console.log("end"); //第一遍动画完成输出end
}, false);

2.トランジション アニメーションのモニタリング

このアニメーションには、webkitTransitionE という 1 つのイベントのみがあります。 nd

dom.addEventListener("webkitTransitionEnd", function(){
    console.log("end");
}, false);

ps 上記のどれも互換性がありません

そのため、非常に少ない settimeout を使用して一貫したアニメーション効果を作成できますが、よく考えてみると、同じ要素の複数のアニメーション効果をネストする必要があるかもしれません。 1 つのアニメーションで完了するだけではありませんか? これには、特定の状況の詳細な分析が必要になる場合があります

3. アニメーションの停止

アニメーションを無限に設定した場合、現在の画像で停止するにはどうすればよいですか