DOM

HTML：

<DIV id=IdTest style="width:1em;
  transform:translateX(0px);
  font-size:30px;
  transition:all 3s 0s;
">■</DIV>
<BUTTON id=IdStart>開始</BUTTON>
<BUTTON id=IdCancel>キャンセル</BUTTON><BR>
<SPAN id=IdLog></SPAN>

JavaScript：

function Job(eve){ //transitioncancel イベントの処理：
  D=eve; //＝[object]：[object TransitionEvent]
詳細
	//isTrusted＝[boolean]：true
	//propertyName＝[string]：transform
	//elapsedTime＝[number]：0.6515539997252224
	//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+"●"; //表示。
}
IdTest.ontransitioncancel=Job; //イベントの割り当て。
IdStart.onclick=function(){ //[開始]ボタンにclickイベント割り当て。トランジション動作開始。
  IdTest.style.transform="translateX(100px)"; //X方向移動。
  IdTest.style.fontSize="10px"; //フォントサイズ変更。
}
IdCancel.onclick=function(){ //[キャンセル]ボタンにclickイベント割り当て。
  IdTest.style.transform="translateX(200px)";
  IdTest.style.fontSize="5px";
}

イベントが3回出た。どうやら違う値にするとキャンセル扱いになるようです。

→CSS：transition、CSS：transform。