DOM

：

：

Document：animationend イベント

　編集：2022.10.10 by T.A.

[Edge]。→、

が完了したときに発生します。

アニメーションが完了前に中止された場合、例えば要素が DOM から削除されたりアニメーションが要素から削除されたりした場合、animationend イベントは発生しません。

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

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

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

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


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


 
JavaScript：
 
function Job(eve){ //animationend イベントの処理：
  D=eve; //＝[object]：[object AnimationEvent]

詳細	//isTrusted＝[boolean]：true
	//animationName＝[string]：TestKF
	//elapsedTime＝[number]：3
	//pseudoElement＝[string]：
	//type＝[string]：animationend
	//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.onanimationend=Job; //イベントの割り当て。











テスト