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(300px)'}  //X軸移動。
  ], 
  {duration:5000, fill:'forwards'}  //掛ける時間、？。
);
function Job(eve){  //remove イベントの処理：
  D=eve;  //＝[object]：[object AnimationPlaybackEvent]
詳細
	//isTrusted＝[boolean]：true
	//currentTime＝[number]：1000
	//timelineTime＝[number]：89608.109
	//type＝[string]：remove
	//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=new Animation(KF, document.timeline);  //アニメーション生成。

function JobPlay(){  //「再生」ボタンが押された時の処理：
  IdLog.innerHTML="";  //表示。
  Ani.onremove=Job;  //イベント割り当て。
  Ani.play();        //再生。
}
function JobSetPlay1(){  //違うアニメーション設定１で再生の処理：
  IdLog.innerHTML="";  //表示。
  KF=new KeyframeEffect(  //キーフレームの指定：
    IdTest, 
    [
      {transform:'translateX(100px)'}  //X軸移動。
    ], 
    {duration:1000, fill:'forwards'}  //掛ける時間、？。
  );
  Ani=new Animation(KF, document.timeline);  //アニメーション生成。
  Ani.onremove=Job;  //イベント割り当て。
  Ani.play();        //再生。
}
function JobSetPlay2(){  //違うアニメーション設定２で再生の処理：
  IdLog.innerHTML="";  //表示。
  KF=new KeyframeEffect(  //キーフレームの指定：
    IdTest, 
    [
      {transform:'translateX(200px)'}  //X軸移動。
    ], 
    {duration:1000, fill:'forwards'}  //掛ける時間、？。
  );
  Ani=new Animation(KF, document.timeline);  //アニメーション生成。
  Ani.onremove=Job;  //イベント割り当て。
  Ani.play();        //再生。
}
IdPlay.onclick=JobPlay;          //ボタンにイベント割り当て。
IdSetPlay1.onclick=JobSetPlay1;  //ボタンにイベント割り当て。
IdSetPlay2.onclick=JobSetPlay2;  //ボタンにイベント割り当て。

アニメーションが削除されるタイミングが変。次の動作の終了時に remove イベントが発生する。

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

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

→click イベント、innerHTML。