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