DOM

：

：

Animation.startTime プロパティ

　編集：2022.10.23 by T.A.

[Edge]。→、、

Web アニメーション Animation の再生を開始する予定時刻を倍精度浮動小数点値（¶オブジェクト）で示します。

mdn： 再生を開始する予定時刻を倍精度浮動小数点値で示します。

mdn： アニメーションの開始時間は、ターゲットの KeyframeEffect が再生を開始するようにスケジュールされているときの DocumentTimeline の時間値です。アニメーションの開始時間は、最初は未解決です（つまり、値がないため null です）。

構文
Animation.startTime
Animation Animation
値

現在の時間をミリ秒で表す浮動小数点数（¶オブジェクト）。または時間が設定されていない場合は null。

この値を読み取って、現在設定されている開始時刻を判断できます。この値を変更して、アニメーションを別の時間に開始することができます。

例
new Animation() と違う設定、startTime設定

HTML： 

<DIV id=IdTest style="width:1em">■</DIV>
<BUTTON id=IdPlay>再生</BUTTON><BR>
<BUTTON id=IdSet1>違うアニメーション設定１、play()</BUTTON>
<BUTTON id=IdSet2>違うアニメーション設定２、startTime設定にてplay()</BUTTON>
<BR>
<SPAN id=IdLog></SPAN>

JavaScript： 

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

function JobPlay(){  //再生の処理：
  IdLog.innerHTML="startTime："+Ani.startTime;  //表示。
  Ani.play();
}
function JobSet1(){  //新しいアニメーション１の処理：
  KE=new KeyframeEffect(  //アニメーション データの作成：
    IdTest, [  //ターゲット。
      {transform:'translateX(200px)'}  //X軸移動。
    ]
    , {duration:1000, fill:'forwards'}  //掛かる時間、？。
  );
  Ani=new Animation(KE, document.timeline);  //アニメーション作成。
  IdLog.innerHTML="startTime："+Ani.startTime;  //表示。
  Ani.play();           //再生。
}
function JobSet2(){
  KE=new KeyframeEffect(  //アニメーション データの作成：
    IdTest, [  //ターゲット。
      {transform:'translateX(100px)'}  //X軸移動。
    ]
    , {duration:1000, fill:'forwards'}  //掛かる時間、？。
  );
  Ani=new Animation(KE, document.timeline);  //アニメーション作成。
  IdLog.innerHTML="startTime："+Ani.startTime;  //表示。
  D=D1=Ani.startTime;  //＝[object]：null
  if(D1==null)D=eve.timeStamp;
  Ani.play();           //再生。
  D2=Ani.startTime;     //＝[object]：null
  Ani.startTime=D+3000;
}
IdPlay.onclick=JobPlay;  //再生ボタンのイベント割り当て。
IdSet1.onclick=JobSet1;  //新しいアニメーション１ボタンのイベント割り当て。
IdSet2.onclick=JobSet2;  //新しいアニメーション２ボタンのイベント割り当て。

function Job(){  //タイマー監視処理：
  IdLog.innerHTML="startTime："+Ani.startTime;  //表示。
}
setInterval(Job, 300);  //タイマー監視。

play() 前も後も startTime はオブジェクトで null を示している。

startTime 設定は、イベントの timeStamp に時間数値を加算すれば、その時間後にアニメーションが開始されるようです。

結果的には、Ani.timeline、更なるは document.timeline に時間を加算することとなる。これは new Animation() のパラメーターによるものでしょう。

→KeyframeEffect()。new Animation()。play()。

→CSS：transform。CSS：translate。

テスト