DOM

：

：

Window：transitionrun イベント

　編集：2022.10.18 by T.A.

[Edge]。→、、

ウインドウ内で CSS トランジションが開始されたときに発行されます。

実際のトランジション変化開始のイベントは transitionstart。

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

→HTMLElement：transitionrun イベント。

例
transitionstart、transitionend、transitionrun イベント

HTML： 

<DIV id=IdAni style="width:1em">■</DIV>
<SPAN id=IdLog></SPAN>

JavaScript： 

function JobS(eve){  //transitionstart イベントの処理：
  D=eve;  //＝[object]：[object TransitionEvent]。全ての動作終了後の値。

詳細
	//isTrusted＝[boolean]：true
	//propertyName＝[string]：transform
	//elapsedTime＝[number]：0
	//pseudoElement＝[string]：
	//type＝[string]：transitionstart
	//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+"開始 ";
}
function JobE(eve){  //transitionend イベントの処理：
  DE=eve;  //＝[object]：[object TransitionEvent]。全ての変化が終了後の値。

詳細	//isTrusted＝[boolean]：true
	//propertyName＝[string]：transform
	//elapsedTime＝[number]：5
	//pseudoElement＝[string]：
	//type＝[string]：transitionend
	//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+"終了 ";
}
function JobR(eve){  //transitionrun イベントの処理：
  DA=eve;  //＝[object]：[object TransitionEvent]。全ての動作が終わったときの値。

詳細	//isTrusted＝[boolean]：true
	//propertyName＝[string]：transform
	//elapsedTime＝[number]：0
	//pseudoElement＝[string]：
	//type＝[string]：transitionrun
	//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+"run ";
}
window.ontransitionstart=JobS;  //イベント割り当て。
window.ontransitionend=JobE;    //イベント割り当て。
window.ontransitionrun=JobR;    //イベント割り当て。
IdAni.style.transition="all 5s linear 2s";  //トランジション割り当て。全てのプロパティを対象で、2 秒後に 5 秒掛けて、直線時間的に変化させる。
IdAni.style.transform="translateX(200px)";  //X軸方向に移動。
IdAni.style.color="red";                    //色変化。

各プロパティ用に transitionrun が発生するようです。

テスト