Web Animations API は、新しいウェブ標準の一部として、現在 Mozilla と Google のブラウザ エンジニアによって開発中です。
Chrome 36 では、Web Animations API の element.animate() メソッドが実装され、デベロッパーは JavaScript を使用して高性能な合成コンポジタ スレッド アニメーションを作成できるようになりました。
このたび、Mozilla が Firefox 48 に element.animate() の実装をリリースし、この新しい JS API を使用して真のクロスブラウザ アクセラレーテッド アニメーションを実現しました。Google と Mozilla は、実装の相互運用性を確保するために懸命に取り組んできました。これは本当に共同の取り組みです。
Web Animations API を使用する利点としては、フレームレートの高速化と消費電力の低減が挙げられます。これにより、すべてのデバイス、特にモバイルでのユーザー エクスペリエンスが向上します。
Web Animations API は、polyfillを介してすべてのブラウザで使用できます。ポリフィルは、存在する場合はフルスピードのネイティブ実装を使用し、それ以外の場合は JavaScript 実装に適切にフォールバックします。WebKit コミュニティが独自の実装を検討し、Edge チームはそれをバックログに追加することを推奨しています。ウェブ アニメーションがすべての主要なブラウザでまもなくサポートされる予定です。
Chrome、Firefox、Opera でウェブ アニメーションの全機能を利用するには、こちらのデモ ページにアクセスしてお試しください。