DOM

HTML：

<DIV id=IdTest style="width:1em">■</DIV>
<BUTTON id=IdPlay>再生</BUTTON>
<BUTTON id=IdStop>終了</BUTTON>
<BUTTON id=IdCancel>中止</BUTTON>
<BR>
<SPAN id=IdLog></SPAN>

JavaScript：

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

function JobPlay(){  //「再生」ボタンが押された時の処理：
  Ani.play();        //アニメーション再生。
}
function JobStop(){ //「終了」ボタンが押された時の処理：
  Ani.finish();       //アニメーション終了。
}
function JobCancel(){ //「中止」ボタンが押された時の処理：
  Ani.cancel();       //アニメーション中止。
}
IdPlay.onclick=JobPlay;   //ボタンにイベント割り当て。
IdStop.onclick=JobStop;   //ボタンにイベント割り当て。
IdCancel.onclick=JobCancel; //ボタンにイベント割り当て。
D=Ani.effect;  //＝[object]：[object KeyframeEffect]
	//target＝[object]：[object HTMLDivElement]
	//pseudoElement＝[object]：null
	//composite＝[string]：replace
	//getKeyframes＝[function]：function getKeyframes() { [native code] }
	//setKeyframes＝[function]：function setKeyframes() { [native code] }
	//getComputedTiming＝[function]：function getComputedTiming() { [native code] }
	//getTiming＝[function]：function getTiming() { [native code] }
	//updateTiming＝[function]：function updateTiming() { [native code] }
D=Ani.effect.getTiming();  //＝[object]：[object Object]
	//delay＝[number]：0
	//direction＝[string]：normal
	//duration＝[number]：10000
	//easing＝[string]：linear
	//endDelay＝[number]：0
	//fill＝[string]：auto
	//iterationStart＝[number]：0
	//iterations＝[number]：1
Ani.effect.updateTiming({duration:1000, delay:2000});  //時間の更新（掛かる時間を10秒、開始時間2秒）。

→new KeyframeEffect()、new Animation()。