Safari 13.1のリリースに伴い、Web Animations APIはすべてのエバーグリーンブラウザに同梱されるようになった。
Webブラウザの初期のアニメーションは、通常、JavaScript APIを使用して作成されていた。このアプローチは柔軟性があったが、ブラウザがハードウェアアクセラレーションまたはレイアウトとレンダリングパイプラインへのフックを使用してアニメーションを最適化することが簡単にはできなかった。
CSS AnimationsとCSS Transitionsは、2007年にWebKitチームによって最初に導入され、最終的にWeb標準になった。これらのAPIは使いやすく、初期のJavaScriptアニメーション実装の課題を克服している。
ただし、CSSアニメーションとトランジションには、特にアニメーションの動的作成、アニメーションの再生の制御、およびアニメーションのライフサイクルの監視に関して、既知の制限がある。
Web Animations APIは、CSSアニメーションとトランジションの最適化機能を提供するソリューションを導入し、以前のJavaScriptベースのAPIの柔軟性を備えている。Web Animations APIは、タイミングモデルとアニメーションモデルを介してWebアニメーションをプログラムで制御する。アニメーションは、JavaScriptを介して作成および制御され、再生速度
、反復、イベントなどにアクセスできる。以前は、requestAnimationFrame
または効率の悪いsetInterval
を広範囲に使用することでこれが可能であった。
Firefox、Safariなどの最新のブラウザ、およびChrome、Edge、BraveなどのすべてのChromiumベースのブラウザが、Webアニメーションをネイティブでサポートするようになった。以前のブラウザはweb-animations-js shimでWeb Animations APIを利用でき、Dojoなどのフレームワークはこの詰め木(shim)を利用して非エバーグリーンのWebアニメーションをサポートする。
Web Animations 仕様は、Web上のアニメーションの共有モデルを提供する。CSS TransitionsとCSS Animationsは、共有される基本モデルの上にレイヤとして存在する。
Webアニメーションのデバッグは、すべてのエバーグリーンブラウザでサポートされている。SafariのWebインスペクタには、タイムラインタブのメディアとアニメーションタイムラインにアニメーションが含まれている。
Firefoxアニメーションインスペクターは、タイムラインに沿って同期されたアニメーションを表示する。これには、タイムラインの任意のポイントに移動してそのポイントでページを表示するために使用できるドラッグ可能なウィジェットが含まれる。Firefoxアニメーションインスペクターは、Webアニメーションで作成されたアニメーション、CSSアニメーション、CSS @keyframes
ルールを表示する。
ChromiumベースのブラウザにはChrome DevTools Animation Inspectorが含まれており、開発者はアニメーションを検査および変更できる。Chrome Animation Inspectorは、CSSアニメーション、CSSトランジション、およびWebアニメーションをサポートしているが、requestAnimationFrame
アニメーションはサポートしていない。
最新のすべてのブラウザでネイティブのWebアニメーションサポートと開発者ツールサポートを利用できるため、JavaScriptとWeb開発者は高速で効率的なネイティブアニメーションサポートを利用できる。この成熟点に到達するのに約15年かかりましたが、これはWebプラットフォームにとって大きな成果である。
Web Animationsは、W3Cワーキングドラフトの推奨事項である。コラボレーションとフィードバックは、W3C CSS Working Group GitHub リポジトリを介して促進される。