DOM

：

：

Animation.finish() メソッド

　編集：2022.10.22 by T.A.

[Edge]。→、、

Web アニメーション Animation の動作を最後（通常再生時は currentTime をそのアニメーションの最高値（duration）にし、逆再生時は 0）にさせます。

mdn： 現在の再生時間を、現在の再生方向に対応するアニメーションの最後に設定します。

mdn： つまり、アニメーションが順方向に再生されている場合、再生時間をアニメーション シーケンスの長さに設定し、アニメーションが逆方向に再生されている場合（reverse() メソッドが呼び出されている場合）、再生時間を 0 に設定します。

構文
Animation.finish()
Animation Animation
戻り値

なし（undefined）。

例
アニメーションの再生と一時停止と終了、リバース

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。

テスト