ウェブアニメーション API

ウェブアニメーション API (Web Animation API) を使うことで、ウェブページの表現を変化させるの同期やタイミング、つまり DOM 要素のアニメーションが可能です。これらはタイミングモデルおよびアニメーションモデルという 2 つのモデルの組み合わせによって実現されます。

概念と使い方

ウェブアニメーション API は、 DOM 要素のアニメーションを記述する共通言語をブラウザーと開発者に提供します。 API の背景の概念や利用方法についての詳しい情報は、ウェブアニメーション API の使用をご覧ください。

点滅したりフラッシュしたりするアニメーションは、注意欠陥・多動性障害（ADHD）などの認知上の課題を抱える人々にとって問題となる場合があります。また、特定の種類の動きは、前庭障碍、てんかん、片頭痛、暗所恐怖症の引き金となる可能性があります。

アニメーションを一時停止または無効にする仕組みを提供することを検討するとともに、動き抑制メディアクエリー（または同等のユーザーエージェントクライアントヒントである Sec-CH-Prefers-Reduced-Motion）を活用し、アニメーションを好まないことを表したユーザーに対して、適切な体験を生成することを検討してください。

Animation: アニメーションノードやソースの再生制御やタイムラインを提供します。 KeyframeEffect() コンストラクターで作成されたオブジェクトを取ることができます。
KeyframeEffect: キーフレームと呼ばれるアニメーション可能なプロパティと値の組み合わせ、およびそのタイミングオプションを記述します。これは Animation() コンストラクターを使用して再生することができます。
AnimationTimeline: アニメーションのタイムラインを表します。このインターフェイスはタイムライン機能（DocumentTimeline や将来のタイムラインオブジェクトによって継承）を定義するために存在し、これ自体は開発者からはアクセスされません。
AnimationEvent: CSS アニメーションモジュールの一部であり、アニメーション名と経過時間を捕捉します。
DocumentTimeline: アニメーションのタイムラインを表し、既定の文書のタイムライン（Document.timeline プロパティを使用してアクセス）を含みます。

ウェブアニメーション API は、document および element に機能を追加しています。

document.timeline: 既定の文書タイムラインを表す DocumentTimeline オブジェクトです。
document.getAnimations(): document 内で要素に対して現在有効な Animation オブジェクトの配列を返します。

Element.animate(): 要素のアニメーションを作成して再生するショートカットメソッドです。作成された Animation オブジェクトのインスタンスを返します。
Element.getAnimations(): Animation オブジェクトの配列で、現在その要素に関連し、将来の実行が予定されているものを返します。

仕様書
Web Animations

このページは MDN の貢献者によって 2026年8月27日に最終更新されました。