【最新版】CSSスクロール連動アニメーション｜JavaScript不要の次世代実装方法を解説

2026年1月14日

生徒

スクロールに応じてフェードインやパララックスを実装したいんですが、JavaScriptライブラリだとページが重くなって…。もっと軽量な方法はないでしょうか？

ペン博士

それなら朗報じゃ！CSSの新しい「Scroll-driven Animations API」を使えば、JavaScriptなしでスクロールアニメーションが作れるぞい。パフォーマンスも大幅改善で、Core Web Vitalsにも優しいんじゃ！

生徒

そういう方法もあるんですね！ぜひ教えてください！

Web制作の現場で、以下のような悩みを抱えていませんか？

jQueryやGSAPのスクロールアニメーションがページを重くしている
Intersection Observerの実装が複雑で保守が大変
スクロールイベントリスナーでパフォーマンスが悪化
Core Web Vitals（CLS、LCP）のスコアが悪い
JavaScriptライブラリのバージョン管理やバンドルサイズが課題

本記事では、CSS Scroll-driven Animations APIを活用して、JavaScriptなしで高パフォーマンスなスクロール連動アニメーションを実装する方法を徹底解説します。

「学習→案件獲得」につなげた受講生のリアルな体験談も公開中！
働き方を変えたい方にも響くストーリーです。

片山さん
妊娠をきっかけに、子どものためにもどこでも働けるスキルを身に付けたいと考える。そこで、オンラインスクールのfammで1ヶ月間Web制作の勉強を開始。その後、独学で勉強に励むも限界を感じ、案件保証が魅力のWithCodeへ入学し、稼げる力を身に付けることができた。現在は副業として稼ぐ力を身に付け、10件以上の案件を担当するまでに成長した。

詳しくはこちらの記事をご覧ください。

片山さんの主な制作実績はこちら

信用力アップを目的にした新規HP制作

株式会社かぶらや様

企業ブランディング向上を目的にした新規HP制作

株式会社SOLIS 様

なぜ今、CSSスクロールアニメーションなのか？

従来のJavaScript実装の課題

これまで、スクロール連動アニメーションを実装する場合、以下のような方法が一般的でした：

jQueryプラグイン： `$(window).scroll()`でスクロール位置を監視
GSAP ScrollTrigger： 高機能だがバンドルサイズ大（数百KB）
Intersection Observer API： JavaScriptで要素の表示判定
Lenis / Locomotive Scroll： スムーススクロール＋アニメーション

しかし、これらの方法には共通の問題がありました：

実装方法	主な課題	パフォーマンス影響
jQueryプラグイン	毎フレームDOM再描画、メモリリーク	FPS低下、スクロールカクつき
GSAP ScrollTrigger	バンドルサイズ大、ライブラリ依存	初回読み込み遅延、LCP悪化
Intersection Observer	複雑なコード、細かい制御困難	比較的良好（タイミング限定）
Lenis/Locomotive	ネイティブスクロール上書き、競合	アクセシビリティ問題
CSS Scroll-driven	ブラウザ対応中（段階的強化）	◎（GPU最適化、リフローなし）

CSS Scroll-driven Animations APIがもたらす革新

CSS Scroll-driven Animations APIは、W3C標準仕様として2023年にChrome 115で正式リリースされた新技術です。以下の特徴があります：

JavaScriptゼロ： CSSのみで完結、バンドルサイズ削減
GPU最適化： ブラウザのCompositor Threadで実行、メインスレッドブロックなし
宣言的記述： `animation-timeline`プロパティで直感的に制御
Core Web Vitals改善： CLS、LCP、INPすべてにポジティブ影響
デバッグ容易： DevToolsのAnimationタブで可視化
Progressive Enhancement： 非対応ブラウザでも段階的に実装可能

パフォーマンスの定量比較

指標	jQuery scroll()	GSAP ScrollTrigger	CSS Scroll-driven
バンドルサイズ	jQuery 87KB + プラグイン	GSAP 47KB + ST 12KB	0KB
FPS（60fpsを基準）	30〜45fps	55〜60fps	60fps安定
メインスレッド占有	20〜30%	5〜10%	0%（Compositor）
LCP影響	+800ms〜1.2s	+300〜500ms	+0ms（遅延なし）
CLS発生率	高（Layout再計算）	中（最適化次第）	低（transform/opacity）

小〜中規模サイトでは、JavaScriptライブラリを完全に置き換え可能。大規模サイトでも、基本的なアニメーションはCSSで実装し、複雑な制御のみJSを併用する「ハイブリッド戦略」が推奨されます。

生徒

なるほど！今まではJavaScriptで頑張ってたけど、
実はそれが重さの原因だったんですね。

ペン博士

その通りじゃ。
毎フレームDOMを触る構造自体が、もう時代遅れになりつつあるのじゃ。

CSS Scroll-driven Animations APIの基礎

2つの核となるタイムライン

CSS Scroll-driven Animations APIは、2種類のタイムラインを提供します：

1. Scroll Progress Timeline（scroll()関数）

ページ全体のスクロール量をアニメーション進行度として使用します。

/* 構文 */
animation-timeline: scroll([<scroller>] [<axis>]);

/* 例 */
.progress-bar {
  animation: grow 1s linear;
  animation-timeline: scroll(root block); /* ルート要素の垂直スクロール */
}

パラメータ：

`` – スクロール対象 – `root`（デフォルト）: ページ全体 – `nearest`: 最も近いスクロールコンテナ – `self`: 要素自身
`` – スクロール方向 – `block`（デフォルト）: 垂直方向 – `inline`: 水平方向 – `y`, `x`: 明示的な軸指定

2. View Progress Timeline（view()関数）

特定要素の画面内表示範囲をタイムラインとして活用します。要素が画面に「入る→表示中→出る」の進行度でアニメーション制御が可能です。

/* 構文 */
animation-timeline: view([<axis>] [<view-timeline-inset>]);

/* 例 */
.fade-in-item {
  animation: fadeIn 1s linear;
  animation-timeline: view(block); /* 要素の表示範囲 */
  animation-range: entry 0% entry 100%; /* 画面に入る瞬間のみ */
}

主要プロパティの完全リファレンス

animation-timeline

アニメーションの進行度を制御するタイムラインを指定します。

/* 値 */
animation-timeline: auto;              /* 通常の時間ベース */
animation-timeline: scroll();          /* ページスクロール */
animation-timeline: view();            /* 要素の表示範囲 */
animation-timeline: scroll(root block); /* ルート垂直スクロール */
animation-timeline: view(inline 20px); /* 水平、20pxオフセット */

animation-range

アニメーション実行の開始位置と終了位置を指定します。`view()`と組み合わせて、要素が画面内のどこからどこまでをアニメーション範囲とするか制御できます。

/* 値の種類 */
animation-range: normal;                    /* 全範囲（0%〜100%） */
animation-range: cover 0% cover 100%;       /* 要素が完全に覆われている範囲 */
animation-range: entry 0% entry 100%;       /* 要素が入ってくる範囲 */
animation-range: exit 0% exit 100%;         /* 要素が出ていく範囲 */
animation-range: entry 25% exit 75%;        /* 入る25%から出る75%まで */

/* 名前付き範囲 */
entry    : 要素が画面に入り始めてから完全に表示されるまで
cover    : 要素が完全に画面内に表示されている範囲
exit     : 要素が画面から出始めてから完全に消えるまで
contain  : 要素が完全に画面内に収まっている範囲

scroll-timeline / view-timeline（非推奨の古い構文）

初期の仕様では個別プロパティでしたが、現在は`animation-timeline`に統合されています。

/* 古い構文（非推奨） */
scroll-timeline-name: my-timeline;
scroll-timeline-axis: block;
animation-timeline: my-timeline;

/* 新しい構文（推奨） */
animation-timeline: scroll(root block);

生徒

最初は難しそうだったけど、
「スクロール基準」と「表示位置基準」って考えると分かりやすいですね！

ペン博士

そうじゃ。
この2つを理解できれば、もう半分は習得したようなものじゃ！

実践コードのよくあるパターン5選

ペン博士

ここでは、実際のプロジェクトでそのまま使える、完成度の高いコード例を紹介するぞ！

パターン1: スクロールプログレスバー

ページ上部に固定表示される、読了進捗を示すプログレスバーです。

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

パターン2: フェードイン＋スライドアップ

要素が画面に入ったら、下から上にフェードインします。

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

パターン3: パララックス（背景固定・前景スクロール）

背景画像を固定し、前景コンテンツをスクロールさせることで、立体感を演出します。

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

パターン4: 横スクロールギャラリー

縦スクロールに応じて、横方向にスライドするギャラリーを実装します。

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

パターン5: スティッキーヘッダーの背景透明度変化

スクロールに応じて、ヘッダーの背景が不透明になります。

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

生徒

プログレスバーも、パララックスも、フェードインも
全部CSSでいけるんですね！

ペン博士

そうじゃ！
しかも構造は意外とシンプルじゃろ？
これからは“軽くて、素直な実装”を選べる者が強くなるのじゃよ。

ブラウザ対応状況とPolyfil

対応ブラウザ一覧（2026年1月時点）

ブラウザ	対応状況	バージョン	注意点
Chrome	完全対応	115+	2023年8月リリース
Edge	完全対応	115+	Chromiumベース
Opera	完全対応	101+	Chromiumベース
Safari	部分対応	17.5+ (iOS 17.5+)	一部機能制限あり
Firefox	試験実装	Nightly build	layout.css.scroll-driven-animations.enabledフラグ
Samsung Internet	完全対応	23+	Chromiumベース

市場シェア考慮： Chrome系ブラウザ（Chrome、Edge、Opera、Samsung）で約75%をカバー。Safariの部分対応により、実質90%以上のユーザーが利用可能です。

生徒

なるほど！JavaScriptを使わなくても、CSSだけでここまでできるんですね。正直、スクロールアニメーションって難しいものだと思ってました。

ペン博士

そう感じる人は多いのう。でも最近は、animation-timeline や view-timeline の登場で、CSSだけでもかなり表現の幅が広がってきたんじゃ。これを活用しない手はないのう！

生徒

しかも軽くてパフォーマンスも良いって、かなり魅力的ですね。実務でも使えそうです！ありがとうございます！

まとめ

本記事では、JavaScriptなしでスクロール連動アニメーションを実装する方法を解説しました。

重要なポイントは以下の通りです。

・CSS Scroll-driven Animations APIを使えばJavaScriptなしで作成できる。
・Scroll Progress TimelineとView Progress Timelineの2種類がある
・ブラウザには対応しているものが多いが、実験段階のものもある

これを機に、ぜひ活用してみてください。