Mozillaは2026年10月27日、Firefox 159を公開し、CSSのスクロール連動アニメーションをデフォルトで有効にしました。Chrome、Edge、Safariに続く対応で、最新安定版の主要ブラウザーで利用できます。ページのスクロールに応じて進捗バーを伸ばしたり、画面に入る画像を徐々に表示したりする動きをCSSで指定できます。
Firefox 159で標準機能として有効に
この機能では、アニメーションの進み具合を経過時間ではなくスクロール位置に結び付けます。下へスクロールすると動きが進み、上へ戻ると逆向きに戻ります。要素が画面内に入った時点から動き始める設定もでき、対象が表示範囲を通過する進行度に合わせてアニメーションさせられます。
Firefox 159では、CSSのスクロール連動アニメーションがデフォルトで有効になりました。基礎となるanimation-timeline、scroll-timeline、view-timelineの各プロパティは、Chrome 115とEdge 115、Safari 26、Firefox 159で利用できます。Baselineでは、主要ブラウザーが対応した機能を「Newly Available」としており、スクロール連動アニメーションは2026年10月にこの段階に達しました。
従来の時間に沿って進むCSSアニメーションでは、ページを開いてからの時間などを基準に動きを再生します。スクロール連動では、スクロール位置がアニメーションの進行度を決めるため、スクロールを止めれば動きも止まり、戻れば進行度も戻ります。CSSの@keyframesで動きを定義し、animation-timelineでスクロールを基準に指定します。
scroll()とview()で動きの基準を指定
scroll()関数は、スクロール領域の開始から終了までを進行度に対応させます。たとえばページ全体のスクロールを基準にすると、画面上部のバーをスクロール量に比例して伸ばせます。ページの半分までスクロールすると、バーも幅の半分まで伸びます。
view()関数は、対象の要素がスクロール領域に入ってから出るまでの位置を基準にします。画像が表示範囲に入るにつれて、透明な状態から徐々に見えるようにする効果に使えます。ページ全体のスクロール位置を基準にするscroll()とは異なり、view()では対象要素の通過状況が進行度を決めます。
これらのタイムラインは、通常のCSSアニメーションと同じく@keyframesで定義した動きに結び付けられます。スクロール量に応じてバーを伸ばす例では、幅ではなく横方向の変形を使い、左端を固定して右へ伸ばします。動きを減らす設定が有効な環境ではアニメーションを表示しない方法もあり、prefers-reduced-motionを使って利用者の設定に合わせられます。
JavaScriptのスクロール監視との違い
従来のJavaScriptによる方法では、スクロールイベントを受け取るたびに位置や割合を計算し、表示を更新します。スクロールイベントはスクロール処理とは別のスレッドから非同期に届くため、メインスレッドで処理するアニメーションはスクロールとずれることがあり、滑らかな同期が難しい場合があります。
JavaScriptのスクロールイベントやIntersectionObserverを使う方法では、メインスレッドで要素を追跡します。メインスレッドがほかの処理でふさがると、ページの応答が遅れたり、動きがカクついたりする可能性があります。CSSのスクロール連動アニメーションは宣言的に設定でき、ブラウザーがメインスレッド外で動かせる場合があります。
Yuriko Hirotaの比較では、重いJavaScript処理を加えた状況で、従来のスクロールイベント方式は動きがぎこちなくなる一方、CSS方式はスクロールへの応答を保ちました。また、スクロール連動の新しいJavaScript APIもあり、ScrollTimelineを使う方法ではCSS版と同じ基盤を利用します。
スクロール位置と要素の表示に連動する演出
スクロール連動アニメーションは、読み進める位置を示すインジケーターや、画面に入る画像の表示などに使えます。カルーセルの進捗表示、カードの積み重ね、横方向のセクション表示なども、スクロールに合わせた演出の例です。こうした動きはスクロール中に進み、逆方向へスクロールすればアニメーションも逆向きに変化します。
scroll()とview()は、アニメーションの時間軸をスクロールに置き換えますが、追跡する対象が異なります。前者はスクロール領域の移動量、後者は特定要素が表示領域を通過する進み具合を使います。そのため、ページ全体の読了位置を表す場合と、個々の要素の登場を表す場合とで基準を選べます。
