CSSだけでスクロール連動！Scroll-driven Animations完全ガイド【2026年最新】

本記事には広告が含まれています

2026/01/26

CSSだけでスクロール連動！Scroll-driven Animations完全ガイド【2026年最新】

Webサイトに動きをつける際、これまではJavaScriptのイベントリスナー（window.addEventListener）や、Intersection Observer APIを利用するのが一般的でした。しかし、スクロールに連動したアニメーションの実装は、メインスレッドを占有しやすく、パフォーマンスの低下を招く原因となりがちです。

そこで注目されているのが、CSSだけでスクロール連動アニメーションを実現する「Scroll-driven Animations」です。JavaScriptのコード量を大幅に削減し、かつ滑らかな描画を実現するこの新技術は、今後のフロントエンド開発の標準となる可能性を秘めています。本記事では、その仕組みとメリット、そして実務での活用可能性について解説します。

Scroll-driven Animations とは何か

Scroll-driven Animations（スクロール駆動アニメーション）とは、W3Cで策定が進められているCSSの新しい仕様です。従来のアニメーションは「時間（0秒から3秒など）」の経過に伴って変化していましたが、この仕様では「スクロールの量」に応じてアニメーションが進行します。

これまでは、スクロール位置を取得して計算し、それをDOM要素のスタイルに反映させるという処理をJavaScriptで記述する必要がありました。しかし、この新仕様を利用すれば、CSSプロパティを記述するだけで同様の表現が可能になります。具体的には、タイムラインの概念を「時間」から「スクロール位置」に置き換えることで実現されています。

従来のJS実装との決定的な違い

最大の違いは、アニメーションの制御がどこで行われるかという点です。JavaScriptによる実装では、スクロールイベントが発生するたびにメインスレッドで計算処理が走ります。そのため、重い処理が重なると画面の描画（フレームレート）が低下し、カクつきの原因となっていました。

一方、Scroll-driven Animationsは、ブラウザのコンポジター（合成）スレッドで処理されることが期待できます。これにより、メインスレッドの負荷状況に関わらず、非常に滑らかなアニメーションを提供できるのです。ユーザー体験（UX）の向上という観点からも、この技術は非常に重要視されています。

「scroll-timeline」と「animation-timeline」の関係

検索キーワードとしても挙がっている「scroll-timeline」ですが、これは現在、より広義な Scroll-driven Animations の仕様の一部として扱われています。実装においては、主に animation-timeline プロパティを使用し、値として scroll() や view() 関数を指定する形が主流です。

以前のドラフト仕様では @scroll-timeline ルールを多用する形式が検討されていましたが、現在はより簡潔な構文へと進化しました。開発者は、要素が画面に入ってきたときに発火するのか（view progress）、スクロールコンテナ全体の進捗に合わせるのか（scroll progress）を直感的に指定できるようになっています。

参考：CSS scroll-driven animations | MDN

主要な2つのタイムライン：scroll() と view()

Scroll-driven Animations を理解する上で欠かせないのが、2種類のタイムライン関数です。これらを使い分けることで、多様な表現が可能になります。それぞれの特徴を見ていきましょう。

コンテナ全体の進捗を追う scroll()

scroll() 関数は、スクロールコンテナ（通常はブラウザのビューポートや、overflow: scroll が設定された要素）の最上部から最下部までの移動量を0%〜100%として扱います。これは「読了率を示すプログレスバー」や「パララックス背景」のような表現に最適です。

実装イメージは以下のようになります。

/* スクロールに合わせてプログレスバーを伸ばす */
.progress-bar {
  scale: 0 1; /* 初期状態は幅0 */
  animation: grow-progress linear;
  animation-timeline: scroll(); /* 画面全体のスクロールに連動 */
  animation-duration: 1ms; /* Firefox等の一部の環境で必要なダミー値 */
}

@keyframes grow-progress {
  to { scale: 1 1; }
}

例えば、ページのスクロールに合わせて画面上部のバーが伸びていくUIを作る場合、JavaScriptであればスクロールイベントごとに高さを再計算する必要がありました。しかし scroll() を使えば、上記のようにCSSのアニメーション定義とタイムラインの紐付けだけで完結します。

※コード内の animation-duration: 1ms; は、仕様上必須ではありませんが、Firefoxなど一部のブラウザ実装においてアニメーションを有効にするために必要となる場合があります。

要素の可視範囲に基づく view()

もう一つの重要な関数が view() です。これは特定の要素がビューポート（画面）に入ってから出るまでの進捗をタイムラインとして扱います。「スクロールして画像が見えたらフェードインする」「要素が画面中央に来たら拡大する」といった、いわゆるスクロールトリガーのアニメーションに使われます。

/* 要素が画面に入るとフェードイン */
.fade-in-image {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% cover 50%; /* アニメーションの開始・終了位置を調整 */
  animation-duration: 1ms; /* 互換性のためのダミー値 */
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

従来、この挙動には Intersection Observer API が必須でした。しかし animation-timeline: view(); を指定するだけで、要素とビューポートの交差判定に基づいたアニメーションが自動的に適用されます。監視対象の要素が増えてもJavaScriptの複雑な管理が不要になるため、開発効率が劇的に向上します。

パフォーマンスと保守性の比較

この技術を採用する最大のメリットは、パフォーマンスの向上とコードの簡素化です。従来のJavaScriptによる実装と、CSSによる Scroll-driven Animations を比較すると、その差は歴然としています。

以下に、それぞれの特徴を比較表としてまとめました。

比較項目	JavaScript (従来)	Scroll-driven Animations (CSS)
実行スレッド	メインスレッド	コンポジタースレッド (※)
滑らかさ	負荷によりカクつく可能性あり	非常に滑らか
コード量	多い (イベント監視、計算処理)	少ない (宣言的なプロパティのみ)
保守性	ロジックとスタイルが混在しがち	スタイル定義として一元管理可能
外部ライブラリ	GSAPなどが必要な場合も多い	不要

※ ブラウザの実装によりますが、transformやopacityなど、レイアウト再計算を伴わないプロパティを使用することで最適化され、メインスレッドへの影響を最小限に抑えられます。

特に注目すべきは「保守性」です。デザイン（アニメーション）に関する記述がCSSファイル内に完結するため、構造（HTML）、見た目（CSS）、機能（JS）の分離が明確になります。後からアニメーションの速度やタイミングを調整する際も、JavaScriptのロジックを読み解く必要がなく、CSSの数値を変更するだけで済みます。

参考：スクロールドリブンアニメーションでスクロール時に要素をアニメーション化する | Chrome for Developers

ブラウザ対応状況とPolyfillの活用

非常に魅力的な機能ですが、実務で導入する際にはブラウザの対応状況を確認する必要があります。2026年1月現在、ChromeやEdgeなどのChromium系ブラウザに加え、Safari 26以降でも標準サポートされており、主要ブラウザでの利用環境は急速に整っています。

一方で、Firefoxについては一部の機能がフラグ（設定）を有効にしないと動作しない場合があるため、現時点では検証が必要です。ただし、対応していないブラウザのためにこの技術を諦める必要はありません。Google Chrome Labsなどが提供している「Scroll-timeline Polyfill」を利用することで、未対応環境でも同等の挙動をJavaScriptで再現することが可能です。

補足：Scroll-triggered Animations との違い

似た名称の技術として「Scroll-triggered Animations」という機能がChrome 145などで導入される予定ですが、これは Scroll-driven Animations とは異なるものです。

Scroll-driven Animations：スクロール量に合わせてアニメーションが進行・逆再生する（スクロールがタイムライン）。
Scroll-triggered Animations：スクロール位置をきっかけ（トリガー）として、通常の時間ベースのアニメーションを開始する。

本記事で解説しているのは前者ですので、情報の混同に注意してください。

実務における具体的な活用シーン

最後に、どのような場面で Scroll-driven Animations が特に有効かを整理します。単なる装飾だけでなく、UXを補助する機能としての使い方が重要です。

長い記事の読了インジケーター

オウンドメディアやブログ記事において、現在どこまで読んだかを可視化するプログレスバーは定番のUIです。これをCSSのみで実装できれば、ページの読み込み速度を損なうことなく、ユーザーに位置情報をフィードバックできます。

製品LPでの製品回転アニメーション

ランディングページ（LP）などでよく見られる、スクロールに合わせて製品画像が回転したり、分解図が展開したりする表現にも適しています。これまでは重いライブラリ（Three.jsやGSAPなど）をJSで制御していましたが、単純な画像シーケンスやCSS 3D Transformとの組み合わせであれば、CSSだけで軽量に実装可能です。

ヘッダーの縮小・スタイル変更

スクロールし始めるとヘッダーの高さが縮んだり、背景色が変化したりする「スティッキーヘッダー」の演出も、scroll() を使うことでスムーズに記述できます。スクロール量に応じた微細な変化を、if文の分岐なしにリニアに表現できるのは大きな利点と言えるでしょう。

まとめ

Scroll-driven Animations は、単なる新しいCSSプロパティという枠を超え、Webアニメーションの実装パラダイムを大きく変える技術です。JavaScriptによる複雑な計算とメインスレッドの占有から解放されることで、Webサイトはより軽量で、より滑らかな体験を提供できるようになります。

もちろん、全てのブラウザが完全に対応するまでには過渡期がありますが、Polyfillの存在やSafariなど主要ブラウザでのサポート拡大によって、すでに実戦投入可能なレベルに達しています。まずは小規模なUIパーツや装飾的な要素から、animation-timeline の記述を試してみてはいかがでしょうか。JSを減らし、CSSの可能性を広げるこの技術は、今後のWeb制作において必須のスキルとなっていくはずです。

【CSS Subgrid入門】使い方を徹底解説！Gridレイアウトの「揃わない」を解決