ウェブアニメーション API
Web Animation API を使うことで 、ウェブページの見た目の変更を同期させたり時間を調整すること、つまり DOM 要素のアニメーションが可能です。これらはタイミングモデルおよびアニメーションモデルという 2 つのモデルの組み合わせによって実現されます。
概念と利用方法
Web Animation API は、 DOM 要素のアニメーションを記述する共通言語をブラウザーと開発者に提供します。 API の背景の概念や利用方法についての詳しい情報は、Web Animation API の利用をご覧ください。
ウェブアニメーションインターフェイス
Animation
-
アニメーションノードやソースの再生制御やタイムラインを提供します。
KeyframeEffect()
コンストラクターで作成されたオブジェクトを取ることができます。 KeyframeEffect
(en-US)-
キーフレームと呼ばれるアニメーション可能なプロパティと値の組み合わせ、及びそのタイミングオプション (en-US)を記述します。これは
Animation()
コンストラクターを使用して再生することができます。 AnimationTimeline
(en-US)-
アニメーションのタイムラインを表します。このインターフェイスはタイムライン機能 (
DocumentTimeline
(en-US) などのタイムラインオブジェクト) を定義するために存在し、これ自体は開発者からはアクセスされません。 AnimationEvent
-
実際には CSS アニメーションの一部です。
DocumentTimeline
(en-US)-
アニメーションのタイムラインを表し、既定の文書のタイムライン (
Document.timeline
(en-US) プロパティ) を含みます。 EffectTiming
-
Element.animate()
,KeyframeEffectReadOnly.KeyframeEffectReadOnly()
(en-US),KeyframeEffect.KeyframeEffect()
のすべてがタイミングプロパティの任意の連想配列オブジェクトを受け付けます。
他のインターフェイスへの拡張
Document
インターフェイスの拡張
document.timeline
(en-US)-
既定の文書タイムラインを表す
DocumentTimeline
オブジェクトです。 document.getAnimations()
-
document
内で要素に対して現在有効なAnimation
オブジェクトの配列を返します。
Element
インターフェイスの拡張
Element.animate()
-
要素のアニメーションを作成して再生するショートカットメソッドです。作成された
Animation
オブジェクトのインスタンスを返します。 Element.getAnimations()
-
Animation
オブジェクトの配列で、現在その要素に関連し、将来の実行が予定されているものを返します。
仕様書
Specification |
---|
Web Animations |
関連情報
- Web Animation API の利用
- Web Animation のデモ
- Polyfill
- Firefox の現在の実装: AreWeAnimatedYet
- ブラウザーの対応のテスト