DOM

：

：

Animation.playbackRate プロパティ

　編集：2022.10.23 by T.A.

[Edge]。→、、

アニメーション Animation の再生速度倍率を数値で取得／設定します。

mdn： アニメーションには、アニメーションのタイムライン時間値の変化率からアニメーションの現在の時間までの倍率を提供する再生速度があります。

再生レートは最初は 1 です。

構文
Animation.playbackRate
Animation Animation
値

速度の倍率を表すプラス／マイナスの数値。負の値はアニメーションの反転を意味します。

たとえば、値を 2 にすると、再生速度が 2 倍になります。

注： アニメーションの playbackRate を 0 に設定すると、アニメーションが実質的に一時停止します（ただし、その再生状態は必ずしも一時停止になるわけではありません）。

例
再生と再生速度指定→updatePlaybackRate()

HTML： 

<DIV id=IdTest style="width:1em">■</DIV>
<BUTTON id=IdSaisei>再生</BUTTON>
<BUTTON id=IdItijiteisi>一時停止</BUTTON><BR>
速度：<INPUT id=IdRate type=range min=-2 max=2 step=0.25 value=1><BR>
<SPAN id=IdLog></SPAN>

JavaScript： 

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

function JobPlay(){  //「再生」ボタンが押された時の処理：
  Ani.play();        //アニメーション再生。
}
function JobPause(){ //「一時停止」ボタンが押された時の処理：
  Ani.pause();       //アニメーション一時停止。
}
function JobRate(){  //「速度」が変更された時の処理：
  D=IdRate.value;    //速度指示を得る（文字列）。
//  Ani.playbackRate=D;  //文字列で指定してもできた。
  Ani.playbackRate=Number(D);  //速度設定。
}
IdSaisei.onclick=JobPlay;      //ボタンにイベント割り当て。
IdItijiteisi.onclick=JobPause; //ボタンにイベント割り当て。
IdRate.oninput=JobRate;        //速度指定変更のイベント割り当て。

function Job(){  //タイマー監視の処理：
  IdLog.innerHTML="playbackRate："+Ani.playbackRate;  //表示。
}
setInterval(Job, 500);  //0.5秒毎のタイマー監視割り当て。

設定は文字列でも OK でした。

少し変な動作をする事もあるようです。

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

→play()、pause()。

→Number。

→click、input イベント。

→setInterval()。

テスト