Element.animate()

keyframes

キーフレームオブジェクトの配列、またはプロパティが反復処理可能な値の配列である単一のキーフレームオブジェクトのどちらかです。詳しくは Keyframe の書式 (en-US)を参照してください。

options

アニメーションの再生時間を表す整数値（ミリ秒単位）、または KeyframeEffect() のオプションの引数 (en-US)や次のオプションで記述された 1 つ以上のタイミングプロパティを含むオブジェクトのどちらかです。

id 省略可

animate() の固有のプロパティです。このアニメーションを参照する DOMString です。

Animation を返します。

Down the Rabbit Hole (with the Web Animation API) のデモでは、上に向かって永遠に流れ続けるアニメーションが #tunnel 要素に施されています。ここでは、アニメーションを素早く作成して再生できる animate() メソッドが用いられています。keyframes として渡されているオブジェクト配列と、timing options として渡されているオブジェクトに注目してください。

document.getElementById("tunnel").animate([
  // keyframes
  { transform: 'translateY(0px)' },
  { transform: 'translateY(-300px)' }
], {
  // timing options
  duration: 1000,
  iterations: Infinity
});

新しいバージョンのブラウザーでは、アニメーションの開始または終了状態のみ（つまり、単一のキーフレーム）で設定することができ、可能であればブラウザーがアニメーションのもう一方を推測します。例えば、この簡単なアニメーション を考えてみましょう。 Keyframe オブジェクトは次のようなものです。

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

アニメーションの終了状態を指定しただけで、開始状態は暗黙になっています。

• ウェブアニメーション API
• Element.getAnimations()
• Animation