DOM

：

：

KeyframeEffect.getKeyframes() メソッド

　編集：2022.10.24 by T.A.

[Edge]。→、、

KeyframeEffect の計算されたオフセットとともに、このアニメーションを構成する計算されたキーフレームの配列（→keyframes）を返します。

構文
KeyframeEffect.getKeyframes()
KeyframeEffect KeyframeEffect オブジェクト。
戻り値

次の形式で一連のオブジェクトを返します。

プロパティ値のペア（property value pairs）
アニメーションの各キーフレームに含まれるプロパティ値のペアと同じ数。
offset
0.0 から 1.0 までの数値、または null として指定されたキーフレームのオフセット。

これは、@keyframes を使用して、CSS スタイルシートで開始状態と終了状態をパーセンテージで指定するのと同じです。

KeyframeEffect.spacing を使用してキーフレームが自動的に配置される場合 null になります。

computedOffset
計算されたキーフレームのリストが KeyframeEffect.spacing に従って生成されたときに計算された、このキーフレームの計算されたオフセット。上記の offset とは異なり、計算されたオフセットが null になることはありません。
easing
このキーフレームから一連の次のキーフレームまで使用される easing 関数。
composite
このキーフレームで指定された値を基になる値と組み合わせるために使用される KeyframeEffect.composite 操作。エフェクトで指定された合成操作が使用されている場合、これは存在しません。
例
簡単なアニメーション

HTML： 

<DIV id=IdTest style="width:1em">■</DIV>
<SPAN id=IdLog></SPAN>

JavaScript： 

KE=new KeyframeEffect(  //アニメーション効果：
  IdTest,  //ターゲット要素。
  [        //キーフレーム。
    {transform:'translateX(0)'}
    , {transform:'translateX(200px)'}  //X軸移動、透明度。
  ], 
  {duration:3000, fill:'forwards'}  //掛ける時間、プロパティ反映の仕方。
);
D=KE.getKeyframes();  //＝[object]：[object Object],[object Object]
	//0＝[object]：[object Object]
	//1＝[object]：[object Object]
Ani=new Animation(KE, document.timeline);  //アニメーション生成。

//Ani.play();  //再生。

得られた内容： 

//D[0]＝[object]：[object Object]
//offset＝[object]：null
//easing＝[string]：linear
//composite＝[string]：auto
//transform＝[string]：translateX(0px)
//computedOffset＝[number]：0

//D[1]＝[object]：[object Object]
//offset＝[object]：null
//easing＝[string]：linear
//composite＝[string]：auto
//transform＝[string]：translateX(200px)
//computedOffset＝[number]：1

→new KeyframeEffect()。

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

→new Animation()、play()。

テスト