ウェブアニメーション API で、ウェブページの表示を変更する同期やタイミングを取ること、つまり DOM 要素のアニメーションが実現できます。これは、タイミングモデルとアニメーションモデルの二つのモデルの組み合わせで実現します。
概念と利用方法
ウェブアニメーション 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オブジェクトのインスタンスを返します。
ウェブアニメーション読み取り専用インターフェイス
以下のインターフェイスは、他の複数の場所で使われる機能を定義していたり、同じプロパティの値を持つ複数のインターフェイスの基盤を提供していたりするために、仕様書に含まれているものです。ウェブ開発作業でこれらを直接使うことはないでしょうが、ライブラリの開発者にとっては技術がどのように働き、実装が効率的になるかについて関心の対象になるかもしれませんし、ブラウザーの開発者は仕様書の定義よりも簡単なリファレンスを探しているかもしれません。/p>
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