Element.animate()

Element.animate() メソッドは、ある要素のアニメーションを作成・再生できる使いやすいメソッドです。戻り値として Animation オブジェクトのインスタンスを返します。

構文

element.animate(keyframes, keyframeOptions); 

引数

keyframes

keyframes オブジェクトには、変化させたい CSS プロパティとその値からなる配列が含まれます。

animate() に渡す keyframes オブジェクトは、次のような 2 通りの形で指定できます。

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);

keyframeOptions

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

spacing

アニメーションの再生時間内にわたって、時間軸上におけるキーフレームの配置方法を指定します。ただし、時間のオフセットは指定されていないものと仮定して計算が行われます。デフォルト値は distribute です。

• distribute を指定した場合、キーフレーム間の時間間隔が等しくなるように配置されます。
• paced を指定した場合、キーフレーム間のアニメーションにおける時間変化の割合（下図におけるグラフの傾き）が等しくなるように配置されます。

以下の例では、CSS の left プロパティに関する 4 つのキーフレームを指定したアニメーションについて、spacing プロパティの働きを示しています（ここでは仕様書の例を参考にしています）。

/* 左のグラフ */
elem.animate([ { left:   '0px' },
               { left: '-20px' },
               { left: '100px' },
               { left:  '50px' }
             ], 1000);  /* spacing はデフォルト値 "distribute" */

/* 右のグラフ */
elem.animate([ { left:   '0px' },
               { left: '-20px' },
               { left: '100px' },
               { left:  '50px' }
             ], { duration: 1000, spacing: "paced(left)" });

 

戻り値

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