DOM

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]：color
	//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 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 JobC(eve){  //transitioncancel イベントの処理：
  DA=eve;  //＝[object]：[object TransitionEvent]。動作開始から約 1 秒後に color プロパティに違う値を設定させて中断？操作、全ての処理が終わってからの値。
詳細
	//isTrusted＝[boolean]：true
	//propertyName＝[string]：color
	//elapsedTime＝[number]：1.574581999957715
	//pseudoElement＝[string]：
	//type＝[string]：transitioncancel
	//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+"中断"+eve.propertyName+" ";
}
window.ontransitionstart=JobS;  //イベント割り当て。
window.ontransitionend=JobE;    //イベント割り当て。
window.ontransitioncancel=JobC;    //イベント割り当て。
IdAni.style.transition="all 5s linear 2s";  //トランジション割り当て。全てのプロパティを対象で、2 秒後に 5 秒掛けて、直線時間的に変化させる。
IdAni.style.transform="translateX(200px)";  //X軸方向に移動。
IdAni.style.color="red";                    //色変化。

JavaScript： 中断？操作。

IdAni.style.color="green";

↑これをした場合、色変化が 2 秒後に開始になり、5 秒後に終了となった。