Element.animate()

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

element.animate(keyframes, options);

keyframes

1. 列挙可能な値の配列をプロパティに持つ keyframes オブジェクト
2. keyframes オブジェクトから成る配列

のどちらかを指定します。keyframes 形式の詳細については Keyframe Formats (en-US) で確認できます。

1. 変化させたい CSS プロパティをキーとし、そのプロパティ値を遷移の順番に並べた配列を値としたオブジェクト

   element.animate({
     opacity: [ 0, 1 ], // [ フレーム 1, フレーム 2 ]
     color: [ "#fff", "#000" ] // [ フレーム 1, フレーム 2 ]
   }, 2000);
   

2. CSS プロパティとそのプロパティ値からなるオブジェクトを、遷移の順番に並べた配列

   element.animate([
     { // フレーム 1
       opacity: 0,
       color: "#fff"
     },
     { // フレーム 2
       opacity: 1,
    ​   color: "#000"
     }
   ], 2000);

options

アニメーションの再生時間を表す ms 単位の整数値、または  animation timing options (en-US) を含むオブジェクトを渡す必要があります。後者の場合、animation timing options (en-US) のプロパティに加え、以下のようなプロパティも追加して animate() に渡すことができます。

keyframeOptions に追加できるプロパティ

id

アニメーションを参照する文字列

composite

Determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. デフォルト値は replace です。

• add dictates an additive effect, where each successive iteration builds on the last. 例として transform を挙げると、translateX(-200px) は自身よりも前に指定されていた rotate(20deg) の値を上書きすることはありませんが、合成結果は translateX(-200px) rotate(20deg) になります。
• accumulate を指定した場合、add に似ていますがよりスマートな結果が得られ、blur(2) と blur(5) の合成結果は blur(7) になります（blur(2) blur(5) ではありません）。
• replace を指定した場合、前回の値は新しい値で上書きされます。

iterationComposite

Defines the way animation values build from iteration to iteration. accumulate または replace を指定できます（上記参照）。デフォルト値は replace です。

Animation を返します。

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

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

• Web Animations API
• Animation