DOM

：

：

Document：transitionrun イベント

　編集：2022.10.11 by T.A.

[Edge]。実験的。→、

実験的： これは実験的な機能です。本番で使用する前にブラウザー互換性一覧表をチェックしてください。

このイベントは、が最初に生成されたとき、すなわち transition-delay が始まる前に発行されます。

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

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

例
スタイルシート（transition 使用）でアニメーション

HTML： 

<SPAN id=IdTest style="
  position:relative;
  left:0; font-size:30px;
  transition:all 3s 2s;
 ">■</SPAN><BR>
<SPAN id=IdLog></SPAN><BR>

JavaScript： 

function JobS(eve){ //transitionstart イベントの処理。
  D=eve;
  IdLog.innerHTML=IdLog.innerHTML+"Start "; //表示。
}
function JobR(eve){ //transitionrun イベントの処理。
  DA=eve;
  IdLog.innerHTML=IdLog.innerHTML+"Run "; //表示。
}
document.ontransitionstart=JobS; //イベント割り当て。
document.ontransitionrun=JobR;   //イベント割り当て。
IdTest.style.left="100px";    //水平軸 100px 移動。
IdTest.style.fontSize="10px"; //フォントサイズを 10px へ。

イベントが2回発生。変化させるプロパティが2つだからでしょう。

→CSS：transition プロパティ

テスト