Element.animate()

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

構文

element.animate(keyframes, options); 

引数

keyframes

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

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

 

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 を含むオブジェクトを渡す必要があります。後者の場合、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