ウェブアニメーション API を使うことで 、Web ページの見た目の変更を同期させたり時間を調整すること、つまり DOM 要素のアニメーションが可能です。これらはタイミングモデル及びアニメーションモデルという2つのモデルの組み合わせによって実現されます。
概念と利用方法
ウェブアニメーション API は、 DOM 要素のアニメーションを記述する共通言語をブラウザーと開発者に提供します。 API の背景の概念や利用方法についての詳しい情報は、ウェブアニメーション API の利用をご覧ください。
ウェブアニメーションインターフェイス
Animation- アニメーションノードやソースの再生制御やタイムラインを提供します。
KeyframeEffect()コンストラクターで作成されたオブジェクトを取ることができます。 KeyframeEffect- キーフレームと呼ばれるアニメーション可能なプロパティと値の組み合わせ、及びそのタイミングオプションを記述します。これは
Animation()コンストラクターを使用して再生することができます。 AnimationTimeline- アニメーションのタイムラインを表します。このインターフェイスはタイムライン機能 (
DocumentTimelineなどのタイムラインオブジェクト) を定義するために存在し、これ自体は開発者からはアクセスされません。 AnimationEvent- 実際には CSS アニメーションの一部です。
DocumentTimeline- アニメーションのタイムラインを表し、既定の文書のタイムライン (
Document.timelineプロパティ) を含みます。 AnimationEffectTimingKeyframeEffectのtiming属性で返されるタイミングプロパティを含むオブジェクトです。AnimationEffectTimingReadOnlyのプロパティを継承していますが、読み取り専用ではない形です。AnimationEffectTimingPropertiesElement.animate(),KeyframeEffectReadOnly.KeyframeEffectReadOnly(),KeyframeEffect.KeyframeEffect()のすべてがタイミングプロパティの任意の連想配列オブジェクトを受け付けます。
他のインターフェイスへの拡張
ウェブアニメーション API によって document 及び element に新たに追加された機能もあります。
Document インターフェイスの拡張
document.timeline- 既定の文書タイムラインを表す
DocumentTimelineオブジェクトです。 document.getAnimations()document内で要素に対して現在有効なAnimationオブジェクトの配列を返します。-
Elementインターフェイスの拡張 Element.animate()- 要素のアニメーションを作成して再生するショートカットメソッドです。作成された
Animationオブジェクトのインスタンスを返します。
ウェブアニメーション読み取り専用インターフェイス
以下のインターフェイスは、他の複数箇所で使われる機能や、同じプロパティの値として使用可能な複数インターフェイスの基盤となる機能を定義するために仕様書に含まれています。ウェブ開発でこれらを直接使うことはないでしょうが、ライブラリ開発者がより効率的な実装をするために当該技術がどのように機能するか理解するためであったり、ブラウザーの開発者が仕様書の定義よりも分かりやすいリファレンスを探す上で関心の対象となるかもしれません。
AnimationEffectTimingReadOnly- タイミングプロパティの連想配列オブジェクトであり、
KeyframeEffectに関連付けられた変更可能なAnimationEffectTimingインターフェイスが継承しています。 AnimationEffectReadOnly- 再生のために
Animationオブジェクトに渡されるKeyframeEffectや、KeyframeEffect(CSS アニメーション及びトランジションに継承) で使われるKeyframeEffectReadOnlyのような、現在および将来の「アニメーション効果」を定義します。Animation.effectのすべての値はAnimationEffectReadOnlyに基づきます。 KeyframeEffectReadOnlyAnimation()コンストラクターによって再生されるアニメーション可能なプロパティと値の組み合わせを記述しています (KeyframeEffectが継承) 。
仕様書
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| Web Animations | 草案 | 初回定義 |
ブラウザーの対応
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|
| 36.0[1] | 48 (48)[1] | 未サポート |
29 |
未サポート |
| (有) | 未サポート[1] | 未サポート | 未サポート | 未サポート |
| Feature | Android | Android Webview | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|
| Basic support | 未サポート | 42.0 | 48.0 (48) | 未サポート | 未サポート | 未サポート | 42.0 |
[1] API のサブセットのみが有効です。個別の API メンバーは対応状況をご覧ください。
関連情報
- ウェブアニメーション API の利用
- ウェブアニメーションのデモ
- Polyfill
- Firefox の現在の実装: AreWeAnimatedYet