DOM

：

：

Animation.timeline プロパティ

　編集：2022.10.23 by T.A.

[Edge]。→、、

Web アニメーション Animation に関連付けられたタイムラインをオブジェクトで取得／設定します。

mdn： このアニメーションに関連付けられたタイムラインを返すか、設定します。タイムラインは、同期のための時間値のソースであり、AnimationTimeline ベースのオブジェクトです。デフォルトでは、アニメーションのタイムラインとドキュメントのタイムラインは同じです。

構文
Animation.timeline
Animation Animation
値

アニメーションの時間軸を決めるタイムライン オブジェクト。無い場合は null となります。

mdn： アニメーションのタイミング ソースとして使用するタイムライン オブジェクト。またはドキュメントのタイムラインであるデフォルトを使用する場合は null。

例
new Animation() による生成と再生と timeline

HTML： 

<DIV id=IdTest style="width:1em">■</DIV>
<BUTTON id=IdSet1>アニメーション生成と再生</BUTTON>
<BUTTON id=IdSet2>アニメーション生成と再生２</BUTTON>
<BR>
<SPAN id=IdLog></SPAN>

JavaScript： 

function Job1(){  //「アニメーション生成と再生」ボタンの処理：
  KE=new KeyframeEffect(  //アニメーション データの作成：
    IdTest, [  //ターゲット。
      {transform:'translateX(200px)'}  //X軸移動。
    ]
    , {duration:1000, fill:'forwards'}  //掛かる時間、？。
  );
  Ani=new Animation(KE, document.timeline);  //アニメーション作成。
  Ani.play();           //再生。
  IdLog.innerHTML="startTime："+Ani.startTime+"<BR>"
	+"timeline："+Ani.timeline;
  D=Ani.timeline;  //＝[object]：[object DocumentTimeline]
	//currentTime＝[number]：6849.488
}
function Job2(){  //「アニメーション生成と再生２」ボタンの処理：
  KE=new KeyframeEffect(  //アニメーション データの作成：
    IdTest, [  //ターゲット。
      {transform:'translateX(200px)'}  //X軸移動。
    ]
    , {duration:1000, fill:'forwards'}  //掛かる時間、？。
  );
  Ani=new Animation(KE, null);  //アニメーション作成。
  Ani.play();           //再生。
  IdLog.innerHTML="startTime："+Ani.startTime+"<BR>"
	+"timeline："+Ani.timeline;
  D=Ani.timeline;  //＝[object]：[object DocumentTimeline]
	//currentTime＝[number]：6849.488
}
IdSet1.onclick=Job1;  //アニメーション生成と再生ボタンのイベント割り当て。
IdSet2.onclick=Job2;  //アニメーション生成と再生２ボタンのイベント割り当て。

new Animation() で指定した timeline の内容が返るようです。

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

→CSS：transform。CSS：translate。

テスト