[Edge]○。→、
CSS トランジション が最初に作成されたときに発行されます。→Document：transitionrun、Element：transitionrun
| バブリング | ¶あり |
|---|---|
| キャンセル可能 | ¶はい |
| インターフェイス | ¶TransitionEvent |
| イベント ハンドラー プロパティ |
HTML：
<DIV id=IdTest style="width:1em; transform:translateX(0px); font-size:30px; transition:all 3s 0s; ">■</DIV> <BUTTON id=IdStart>開始</BUTTON><BR> <SPAN id=IdLog></SPAN>
JavaScript：
function Job(eve){ //transitionrun イベントの処理：
D=eve; //＝[object]：[object TransitionEvent]
詳細
//isTrusted＝[boolean]：true
//propertyName＝[string]：width
//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+"●"; //表示。
}
IdTest.ontransitionrun=Job; //イベントの割り当て。
IdStart.onclick=function(){ //[開始]ボタンにclickイベント割り当て。トランジション動作開始。
IdTest.style.transform="translateX(100px)"; //X方向移動。
IdTest.style.fontSize="10px"; //フォントサイズ変更。
}
イベントが3回発生した。