DOM

HTML：

<DIV id=IdTest style="width:1em">■</DIV>
<BUTTON id=IdPlay>再生</BUTTON>
<BUTTON id=IdPause>一時停止</BUTTON>
<BUTTON id=IdEnd>終了</BUTTON>
<BUTTON id=IdCancel>中断</BUTTON>
<BR>
<SPAN id=IdLog></SPAN>

JavaScript：

KF=new KeyframeEffect(  //キーフレームの指定：
  IdTest, 
  [
    {transform:'translateX(0)'}, {transform:'translateX(500px)'}  //X軸移動。
  ], 
  {duration:5000, fill:'forwards'}  //掛ける時間、？。
);
Ani=new Animation(KF, document.timeline);  //アニメーション生成。

function JobPlay(){  //「再生」ボタンが押された時の処理：
  IdLog.innerHTML="";  //表示。
  Ani.play();        //アニメーション再生。
}
function JobPause(){ //「一時停止」ボタンが押された時の処理：
  IdLog.innerHTML="";  //表示。
  Ani.pause();       //アニメーション一時停止。
}
function JobEnd(){  //「速度」ボタンが押された時の処理：
  IdLog.innerHTML="";  //表示。
  Ani.finish();       //アニメーション終了。
}
function JobCancel(){  //「中断」ボタンが押された時の処理：
  IdLog.innerHTML="";  //表示。
  Ani.cancel();       //アニメーション キャンセル。
}
IdPlay.onclick=JobPlay;      //ボタンにイベント割り当て。
IdPause.onclick=JobPause;    //ボタンにイベント割り当て。
IdEnd.onclick=JobEnd;        //ボタンにイベント割り当て。
IdCancel.onclick=JobCancel;  //ボタンにイベント割り当て。

function Job(eve){  //finish イベントの処理：
  D=eve;  //＝[object]：[object AnimationPlaybackEvent]。「再生」してからできるだけすぐに「終了」を押した。
詳細
	//isTrusted＝[boolean]：true
	//currentTime＝[number]：5000
	//timelineTime＝[number]：6317.777999999999
	//type＝[string]：finish
	//target＝[object]：[object Animation]
	//currentTarget＝[object]：[object Animation]
	//eventPhase＝[number]：0
	//bubbles＝[boolean]：false
	//cancelable＝[boolean]：false
	//defaultPrevented＝[boolean]：false
	//composed＝[boolean]：false
	//…

  IdLog.innerHTML="終了しました";  //表示。
}
Ani.onfinish=Job;

→new KeyframeEffect()、new Animation()、play()、pause()、finish()、cancel()。

→CSS：transform。CSS：translateX()。duration、fill。

→click イベント、innerHTML。