DOM

：

：

Document：animationiteration イベント

　編集：2022.10.10 by T.A.

[Edge]。→、

の反復が 1 回分終了し、次の回が始まったときに発生します。

このイベントは animationend イベントと同時には発生せず、従って animation-iteration-count が 1 のアニメーションでは発生しません。

バブリング あり
キャンセル可能 いいえ
インターフェイス AnimationEvent
イベント ハンドラー プロパティ onanimationiteration

このイベントの本来の対象は、トランジションが適用された Element です。このイベントを Document インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、HTMLElement：animationiteration イベントを参照してください。

例
スタイルシートでアニメーション

以下のCSSが組み込んであります： 


 
HTML：
 
すぐにスクリプトを実行させてください。
<DIV id=IdTest style="width:1em;
  animation:3s linear 2s infinite TestKF;
">■</DIV>
<SPAN id=IdLog></SPAN>


 
JavaScript：
 
function Job(eve){ //animationiteration イベントの処理：
  D=eve; //＝[object]：[object AnimationEvent]。4回目くらい内容。

詳細	//isTrusted＝[boolean]：true
	//animationName＝[string]：TestKF
	//elapsedTime＝[number]：12
	//pseudoElement＝[string]：
	//type＝[string]：animationiteration
	//target＝[object]：[object HTMLDivElement]
	//currentTarget＝[object]：null
	//eventPhase＝[number]：0
	//bubbles＝[boolean]：true
	//cancelable＝[boolean]：true
	//defaultPrevented＝[boolean]：false
	//composed＝[boolean]：false
	//…


  IdLog.innerHTML=IdLog.innerHTML+"★"; //表示。
}
document.onanimationiteration=Job; //イベントの割り当て。











テスト