Element.animate()

Element インターフェイスの animate() メソッドは、新しい Animation の生成、この要素への適用、そしてアニメーションの再生を行うショートカットメソッドです。生成した Animation オブジェクトのインスタンスを返します。

メモ: 要素には複数のアニメーションを適用することができます。 Element.getAnimations() を呼び出すと、要素に作用するアニメーションのリストを取得することができます。

構文

animate(keyframes, options)

引数

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)' }
];

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

仕様書

Specification
Web Animations
# dom-animatable-animate

ブラウザーの互換性

BCD tables only load in the browser

関連情報