CSSだけでスクロールアニメーションを実装！Scroll-driven Animationsの使い方を解説 – Re:ProS(レプロス)メディアプログラミングに関する総合サイト

Webサイトをスクロールすると、画像がふわっと表示されたり、文字が動いたりするアニメーションを見かけることがあります。

CSSの「Scroll-driven Animations」を使えば、JavaScriptを使わずにスクロールに連動したアニメーションを実装できます。

この記事では、Scroll-driven Animationsの基本的な仕組みから、利用が向いているケースまでわかりやすく解説します。

Scroll-driven Animationsとは？

Scroll-driven Animationsとは、スクロールの進行状況に合わせてCSSアニメーションを動かせる仕組みです。

2023年にGoogle Chrome 115でサポートされましたが、当初はAppleのSafariに対応しておらず、Webサイト制作で採用する際にはブラウザの対応状況に注意が必要でした。

しかし、2025年9月にはSafari 26が正式対応し、iPhoneやMacのSafariでも利用できるようになっています。

※ただし、Firefoxなどの非対応ブラウザもあるため、導入する際は対応状況を確認する必要があります。

出典：Chrome for Developers「Animate elements on scroll with Scroll-driven animations」（2023年5月5日公開）
出典：WebKit「WebKit Features in Safari 26.0」（2025年9月15日公開）

Scroll-driven Animationsには2種類のタイムラインがある

Scroll-driven Animationsには、「Scroll Progress Timeline」と「View Progress Timeline」という2種類のタイムラインがあります。

Scroll Progress Timeline

スクロール領域の進行状況に応じてアニメーションを動かす仕組みです。
ページのスクロール位置に合わせて進捗バーを伸ばすような演出に使用できます。

View Progress Timeline

要素がスクロール領域内に現れてから通過するまでの進行状況に応じてアニメーションを動かす仕組みです。
画像やテキストが画面内に入るタイミングに合わせたフェードインなどに活用できます。

CSSでは、それぞれscroll()とview()を使って指定します。

参考：MDN「CSS scroll-driven animations」

Scroll-driven Animationsでできること

Scroll-driven Animationsを使うと、下記のようなさまざまな演出をCSSだけで実装できます。

スクロールに合わせて要素をフェードイン

画像やテキストが画面内に入るタイミングに合わせて、徐々に表示されるアニメーションです。

animation-timeline: view()を使用すると、要素がスクロール領域内を移動する進行状況に合わせて、透明度を変化させることができます。

企業サイトのサービス紹介や実績紹介など、コンテンツを順番に見せたい場面で活用できます。

スクロールの進行状況をプログレスバーで表示

ページをスクロールすると、画面上部のバーが徐々に伸びていくアニメーションです。

animation-timeline: scroll()を使用し、スクロール領域の進行状況に合わせてバーの長さを変化させることができます。

記事ページなどで、ユーザーがどこまで読み進めたのかを視覚的に伝えたい場合に適しています。

スクロールに合わせて画像を拡大・縮小

スクロールの進行状況に合わせて、画像を徐々に拡大・縮小するアニメーションです。

CSSのtransform: scale()と組み合わせることで、画像に奥行きや動きを加えられます。

例えば、ファーストビューから次のセクションへ移動する際に画像を縮小したり、コンテンツが表示されるタイミングで画像を拡大したりする演出に活用できます。

スクロールに合わせて要素を移動・回転

スクロール位置に応じて、要素を横に移動させたり、回転させたりすることもできます。

transform: translateX()やrotate()などを組み合わせることで、スクロールに連動した動きを表現できます。

例えば、スクロールに合わせて装飾要素を移動させたり、イラストを回転させたりする演出に活用できます。

Scroll-driven Animationsの基本的な実装方法

ここからは、実際のコードを使ってScroll-driven Animationsの実装方法を紹介します。

基本的には、CSSの@keyframesでアニメーションの動きを定義し、animation-timelineでスクロールとの連動方法を指定します。

基本の書き方

例えば、スクロールに合わせて要素をフェードインさせる場合は、次のように記述します。

.fade-in {
  animation: fade-in linear both;
  animation-timeline: view();
}

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

  to {
    opacity: 1;
  }
}

@keyframesでは、透明度を0から1へ変化させるアニメーションを定義しています。

animation-timeline: view()を指定することで、時間経過ではなく、要素がスクロール領域内を移動する進行状況に合わせてアニメーションが動きます。

なお、animation-timelineはanimationショートハンドによって初期値にリセットされるため、上記のようにanimationの後に記述する必要があります。

参考：MDN「animation-timeline」

スクロールに合わせてフェードインさせる

実際に要素をフェードインさせる場合は、animation-rangeを指定すると、アニメーションが始まる位置と終了する位置を調整できます。

<div class="fade-in">
  <p>スクロールに合わせて表示されるコンテンツ</p>
</div>

.fade-in {
  animation: fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

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

  to {
    opacity: 1;
  }
}

この例では、要素がスクロール領域に入り始めてから、完全に入るまでの間に透明度が0から1へ変化します。

animation-rangeを調整することで、フェードインが始まるタイミングや完了する位置を変更できます。

参考：MDN「animation-range」

スクロール進捗バーを作る

次に、ページのスクロール進行状況に合わせて伸びるプログレスバーを作成します。

<div class="progress-bar"></div>

.progress-bar {
  transform: scaleX(0);
  transform-origin: left;
  animation: progress linear both;
  animation-timeline: scroll(root block);
}

@keyframes progress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

scroll(root block)は、ルート要素の縦方向のスクロール進行状況を参照します。

ページの先頭ではバーの長さが0になり、ページの最下部に到達すると横幅いっぱいに伸びます。

このような演出は、記事ページや長いコンテンツを持つWebサイトで活用できます。

アニメーションの開始・終了位置を調整する

Scroll-driven Animationsでは、animation-rangeを使ってアニメーションの開始位置と終了位置を指定できます。

例えば、view()を使用する場合、次のような指定が可能です。

.fade-in {
  animation: fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

entryは、要素がスクロール領域内に入ってくる区間を表します。一方、exitは要素がスクロール領域から出ていく区間を表します。

これらを組み合わせることで、要素が画面内に入るタイミングや、画面外へ移動するタイミングに合わせてアニメーションを制御できます。

Scroll-driven AnimationsとGSAPの違い

スクロールアニメーションを実装する方法としては、JavaScriptライブラリの「GSAP」もよく利用されています。

どちらもスクロールに連動したアニメーションを実装できますが、使用する技術や得意な表現が異なります。

比較項目	Scroll-driven Animations	GSAP（ScrollTrigger）
使用技術	CSS	JavaScript
ライブラリ	不要	GSAPが必要
基本的なスクロール連動	対応	対応
複雑なアニメーション制御	CSSで表現できる範囲に制約	柔軟に制御できる
ブラウザ対応	対応状況の確認が必要	GSAPの対応環境に依存
向いている用途	シンプルなスクロール連動演出	複雑な演出や細かな制御