DOM

：

：

Document：animationstart イベント

　編集：2022.10.11 by T.A.

[Edge]。→、

CSS アニメーションが実際の動きを開始したときに発生します。

animation-delay がある場合、このイベントは待ち時間が経過したときに一度発生します。待ち時間が負の数の場合、イベントは elapsedTime が待ち時間の絶対値と等しくなったときに発生します（および、関連して、アニメーションはシーケンスの中でそのタイム インデックスに再生が始まります）。

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

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

例
スクリプトでアニメーション

HTML： 

<DIV id=IdTest style="width:1em;">■</DIV>
<BUTTON id=IdPlay>再生</BUTTON>
<SPAN id=IdLog></SPAN>

JavaScript： 

function Job(eve){ //animationstart イベントの処理：
  D=eve; //
  IdLog.innerHTML=IdLog.innerHTML+"●"; //表示。
}
document.onanimationstart=Job; //イベントの割り当て。

let KF=[
  { // from
    opacity:0,
    transform:'translateX(0px)'
  },
  { // to
    opacity:1,
    transform:'translateX(100px)'
  }
];	//キーフレーム：透明→不透明で横に100px移動。
A=IdTest.animate(KF, 2000);     //2秒掛けてアニメーション再生する。
IdPlay.onclick=function(){ //[再生]ボタンにclickイベント割り当て。
  A.play();  //アニメーションの再生。
}

¶アニメーション開始されるが、イベントが起こらない。

→Element.animate()、Animation.play()。

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

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


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


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

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


 
→AnimationEvent。









テスト