キーフレームの形式

Element.animate()、KeyframeEffect()、KeyframeEffect.setKeyframes() はいずれも、一連のキーフレームを表す形式のオブジェクトを受け入れます。この形式にはいくつかのオプションがあり、以下で説明します。

構文

キーフレームの形式には、2 つの異なる方法があります。

反復処理するプロパティと値からなるオブジェクト（キーフレーム）の配列 (array) です。これは getKeyframes() メソッドが返す正規の形式です。
js
```
element.animate(
  [
    {
      // from
      opacity: 0,
      color: "#fff",
    },
    {
      // to
      opacity: 1,
      color: "#000",
    },
  ],
  2000,
);
```
各キーフレームのオフセットは offset 値を提供することで指定します。
js
```
element.animate(
  [{ opacity: 1 }, { opacity: 0.1, offset: 0.7 }, { opacity: 0 }],
  2000,
);
```
メモ: offset 値は指定された場合、0.0 から 1.0 の間で昇順に並んでいなければなりません。

すべてのキーフレームにオフセットを指定する必要はありません。オフセットを指定しないキーフレームは、隣接するキーフレーム間で等間隔に配置されます。

キーフレーム間に適用するイージングは、下記で示すように easing 値を提供することで指定します。
js
```
element.animate(
  [
    { opacity: 1, easing: "ease-out" },
    { opacity: 0.1, easing: "ease-in" },
    { opacity: 0 },
  ],
  2000,
);
```
この例では、指定したイージングは指定したキーフレームから次のキーフレームまでしか適用されません。しかし、引数 options で指定した easing 値は、アニメーションの単一の反復、つまり再生時間全体に適用されます。
オブジェクト (object) で、アニメーションさせるプロパティと、反復する値の配列 (array) からなるキーと値のペアを格納します。
js
```
element.animate(
  {
    opacity: [0, 1], // [ from, to ]
    color: ["#fff", "#000"], // [ from, to ]
  },
  2000,
);
```
この形式を使用した場合、配列のそれぞれの要素数は同じである必要はありません。指定された値はそれぞれ独立した空間となります。
js
```
element.animate(
  {
    opacity: [0, 1], // offset: 0, 1
    backgroundColor: ["red", "yellow", "green"], // offset: 0, 0.5, 1
  },
  2000,
);
```
特別なキーである offset、easing、composite（下記で記述）をプロパティ値の横に並べて指定することができます。
js
```
element.animate(
  {
    opacity: [0, 0.9, 1],
    offset: [0, 0.8], // Shorthand for [ 0, 0.8, 1 ]
    easing: ["ease-in", "ease-out"],
  },
  2000,
);
```
プロパティ値のリストから適切なキーフレームの集合を生成した後、指定されたオフセットがそれぞれ対応するキーフレームに適用されます。値が足りない場合、またはリストに null 値が格納されている場合、オフセットを指定していないキーフレームは、記述されている配列形式と同様に等間隔に配置されます。

もし easing や composite の値がいくつかある場合、対応するリストは必要に応じて繰り返されます。

暗黙の to/from キーフレーム

新しいバージョンのブラウザーでは、アニメーションの始まりや終わりの状態のみ（つまり、単一のキーフレーム）を設定することができます。例えば、この単純なアニメーションを考えてみましょう。キーフレームオブジェクトは次のようになります、

let rotate360 = [{ transform: "rotate(360deg)" }];

アニメーションの終わりの状態を指定しただけで、始めの状態は暗黙的に指定されています。

キーフレームは、animatable CSS propertiesのいずれかのプロパティと値のペアを指定します。プロパティ名はキャメルケースを使用して指定しますので、例えば background-color は backgroundColor となり、background-position-x は backgroundPositionX となります。margin のような一括指定も使用できます。

例外的な CSS プロパティが 2 つあります。

float は cssFloat と書く必要があります。"float" は JavaScript で予約語であるためです。ここでは参考程度のものです。"float" はアニメーション可能な CSS プロパティではなく、アニメーションには影響しないからです。
offset は cssOffset と書く必要があります。"offset" は下記の通り、キーフレームのオフセットを表すからです。

以下の特殊な属性を指定することもできます。

offset: キーフレームのオフセットを 0.0 から 1.0 の間の数値、または null で指定します。これは CSS スタイルシートで @keyframes を使用して始まりと終わりの状態をパーセントで指定するのと同じです。この値が null または存在しない場合、キーフレームは隣接するキーフレーム間で等間隔に配置されます。
easing: 連なった次のキーフレームまでの間で使用されるタイミング関数です。
composite: このキーフレームで指定した値と基底値を合成するために用いる KeyframeEffect.composite 演算子です。効果に指定した合成処理を使用している場合は auto になります。

構文

暗黙の to/from キーフレーム

属性

関連情報