DOM

HTML：

<DIV id=IdTest style="width:1em">■</DIV>
<BUTTON id=IdPlay>再生</BUTTON>
<BUTTON id=IdPause>一時停止</BUTTON>
<BUTTON id=IdRev>反対</BUTTON>
<BUTTON id=IdStop>終了</BUTTON><BR>
<SPAN id=IdLog></SPAN>

JavaScript：

KE=new KeyframeEffect(  //アニメーション データの作成：
  IdTest, [  //ターゲット。
    {transform:'translateX(0)'}
    , {transform:'translateX(500px)'}  //X軸移動。
  ]
  , {duration:10000, fill:'forwards'}  //10秒掛けて、？。
);
Ani=new Animation(KE, document.timeline);  //アニメーション作成。

function JobPlay(){  //「再生」ボタンが押された時の処理：
  Ani.play();        //アニメーション再生。
}
function JobPause(){  //「一時停止」ボタンが押された時の処理：
  Ani.pause();       //アニメーション一時停止。
}
function JobStop(){  //「終了」ボタンが押された時の処理：
  Ani.finish();       //アニメーション終了。
}
function JobRev(){  //「反対」ボタンが押された時の処理：
  Ani.reverse();       //アニメーション終了。
}
IdPlay.onclick=JobPlay;   //ボタンにイベント割り当て。
IdPause.onclick=JobPause; //ボタンにイベント割り当て。
IdStop.onclick=JobStop;   //ボタンにイベント割り当て。
IdRev.onclick=JobRev;   //ボタンにイベント割り当て。

function Job(){  //タイマー監視の処理：
  IdLog.innerHTML="playState："+Ani.playState+"<BR>"
	+"currentTime："+Ani.currentTime;  //表示。
}
setInterval(Job, 300);  //0.3秒毎のタイマー監視割り当て。

→addEventListener()。

→animate()。commitStyles()。remove イベント。replaceState、reverse()、currentTime。

→CSS：transform。CSS：translate。