Element
インターフェースの animate()
メソッドは、新たに Animation
の作成、対象要素への適用、そしてアニメーションの再生を行うショートカットメソッドです。戻り値として Animation
オブジェクトのインスタンスを返します。
構文
element.animate(keyframes, options);
引数
keyframes
- 列挙可能な値の配列をプロパティに持つ keyframes オブジェクト
- keyframes オブジェクトから成る配列
- のどちらかを指定します。keyframes 形式の詳細については Keyframe Formats で確認できます。
-
- 変化させたい CSS プロパティをキーとし、そのプロパティ値を遷移の順番に並べた配列を値としたオブジェクト
element.animate({ opacity: [ 0, 1 ], // [ フレーム 1, フレーム 2 ] color: [ "#fff", "#000" ] // [ フレーム 1, フレーム 2 ] }, 2000);
- CSS プロパティとそのプロパティ値からなるオブジェクトを、遷移の順番に並べた配列
element.animate([ { // フレーム 1 opacity: 0, color: "#fff" }, { // フレーム 2 opacity: 1, color: "#000" } ], 2000);
- 変化させたい CSS プロパティをキーとし、そのプロパティ値を遷移の順番に並べた配列を値としたオブジェクト
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 animate() の定義 |
草案 | Editor's draft. |
ブラウザ実装状況
現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。
この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。
手助けしていただける場合は、こちらから!
機能 | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
基本サポート | 39 | ? | 47.0 (47.0) | ? | ? | ? |
機能 | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|---|
基本サポート |
? | ? | ? | 47.0 (47.0) | ? | ? | ? | ? |