DOM

以下のCSSが組み込んであります：

HTML：

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

JavaScript：

function JobS(eve){  //animationstart イベントの処理：
  D=eve;  //＝[object]：[object AnimationEvent]
詳細
	//isTrusted＝[boolean]：true
	//animationName＝[string]：TestKF
	//elapsedTime＝[number]：0
	//pseudoElement＝[string]：
	//type＝[string]：animationstart
	//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){  //animationend イベントの処理：
  DE=eve;
  IdLog.innerHTML=IdLog.innerHTML+"終了 ";
}
function JobA(eve){  //animationiteration イベントの処理：
  DA=eve;  //＝[object]：[object AnimationEvent]。アニメーションが終了した後の値。
詳細
	//isTrusted＝[boolean]：true
	//animationName＝[string]：TestKF
	//elapsedTime＝[number]：10
	//pseudoElement＝[string]：
	//type＝[string]：animationiteration
	//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+"繰り返し ";
}
window.onanimationstart=JobS;  //イベント割り当て。
window.onanimationend=JobE;  //イベント割り当て。
window.onanimationiteration=JobA;  //イベント割り当て。
IdAni.style.animation="5s linear 2s 3 TestKF";  //アニメーション割り当て。1 秒後に 5 秒掛けて、直線時間的に 3 回アニメーションをする。