DOM

：

：

keyframes オブジェクト

　編集：2022.10.25 by T.A.

[Edge]。→、、

アニメーション用のキーフレームを表すのオブジェクト。

mdn： Element.animate()、KeyframeEffect()、KeyframeEffect.setKeyframes() はすべて、一連のキーフレームを表すようにフォーマットされたオブジェクトを受け入れます。

構文

¶方法1：

[
  プロパティと値のObj[, プロパティと値のObj[, …]]
]

プロパティと値のObj： 複数指定は、時間軸の対応してカンマで区切って指定する。

{プロパティ:値[, プロパティ:値[, …]]}
プロパティ CSSプロパティのスクリプト用記述。
値 文字列または数値。文字列の場合はクォーテーションで括る必要がある。

文字列値で、一度に値が複数ある場合は、そのままつなげるか、半角空白で区切ってつなげて記述する。

¶方法2：

{
  プロパティと値群[, プロパティと値群[, …]]
}

プロパティと値群：

プロパティ: [値[, 値[, …]]]
プロパティ CSSプロパティのスクリプト用記述、キーワード。
値 文字列または数値。文字列の場合はクォーテーションで括る必要がある。

時間軸に応じて、カンマで区切って配列要素として値を指定する。

文字列値で、一度に値が複数ある場合は、そのままつなげるか、半角空白で区切ってつなげて記述する。

値全体を「[ ]」で配列としているが、値が 1 つの場合は省く事ができ、全ての時間軸に対応する。

プロパティ
キーワード説明と値
offset CSSでのキーフレーム @keyframes のパーセント指定に対応していて、0.0～1.0 の数値。または null（¶不明）。
easing このキーフレームから一連の次のキーフレームまで使用される easing 関数を表す文字列。時間の経過に伴うアニメーションの変化率を表す。→CSS：animation-timing-function
linear 時間進捗値と出力進捗値が同じ（直線的）。初期値。
ease
ease-in
ease-out
ease-in-out
cubic-bezier(x1, y1, x2, y2) 3 次ベジェ easing 関数を指定する。
composite →composite

仕様書： "auto" を与えた場合、当の keyframe が属する keyframe 効果上に指定されたが利用されることになる。

mdn： エフェクトで指定された複合操作が使用されている場合、これは auto になります。

例
いろいろな動き

HTML： 

<DIV id=IdTest style="width:1em">あ</DIV>

JavaScript： 方法1 

KF=[
  {offset:0, fontSize:'10px', transform:'translateX(0)'}
 ,{offset:0.1, fontSize:'10px', transform:'translateX(30px)'}
 ,{offset:0.15, fontSize:'50px', transform:'rotateX(0)translateX(40px)'}
 ,{fontSize:'5px', transform:'rotateX(360deg) translateX(500px)'}
];
KE=new KeyframeEffect(IdTest, KF, {duration:5000});
Ani=new Animation(KE);
Ani.play();

JavaScript： 方法2 

KF={
  opacity:[0, 1, 0, 1, 0, 1, 0, 1]  //透明度。
 ,fontSize:['50px', '10px']         //フォントサイズ。
 ,transform:['rotateX(0)translateX(0)', 'rotateX(360deg)translateX(500px)']  //X軸移動。
};
KE=new KeyframeEffect(IdTest, KF, {duration:5000});  //キーフレーム効果生成。
Ani=new Animation(KE);  //アニメーション生成。
Ani.play();  //再生。

→CSS：font-size、CSS：transform、CSS：opacity、translateX()。

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

テスト