CSSスクロール連動アニメーションの作り方｜scroll()実働デモ付き

CSS Scroll-driven Animationsは、経過時間ではなくスクロール量をアニメーションの進捗に使う仕組みです。読了進捗バー、要素が画面へ入る途中の変化、スクロールに追従する図解を、毎回scrollイベントで計算せず表現できます。

情報確認日：2026年8月20日

結論：進捗はscroll()、要素の出入りはview()

枠内をスクロールして動きを確認する

scroll()で読了進捗バーを作る

.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 4px;
  transform: scaleX(0);
  transform-origin: left;
  background: #2563eb;
  animation: reading-progress linear both;
  animation-timeline: scroll(root block);
}

@keyframes reading-progress {
  to { transform: scaleX(1); }
}

scroll(root block)はルートスクロール領域のblock方向をタイムラインにします。通常のanimation-durationではなくスクロール位置が進捗を決めるため、ユーザーが戻ればバーも戻ります。

view()で要素の出入りに連動させる

.feature-card {
  opacity: 0.35;
  transform: translateY(2rem);
  animation: reveal linear both;
  animation-timeline: view(block);
  animation-range: entry 10% cover 35%;
}

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

entryは要素が入り始める区間、coverはスクロールポートとの重なりを基準にする区間です。値を派手にする前に、DevToolsで開始と終了が意図どおりか確かめます。

JavaScriptのscrollイベントとの違い

見た目の進捗はCSS、データ送信やアプリ状態の変更はJavaScript、と役割を分けると保守しやすくなります。

アクセシビリティと動きの抑制

スクロールのたびに大きく回転・拡大すると、内容を読む操作そのものが負担になります。装飾に留め、文字の可読性や操作対象の位置を不安定にしないでください。動きを減らす設定には静止表示を用意します。

@media (prefers-reduced-motion: reduce) {
  .feature-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

未対応ブラウザへのフォールバック

最初から要素をopacity: 0にして対応環境だけ表示させると、未対応環境で内容が消えます。基本状態は読める見た目にし、@supports内でのみ装飾を追加します。

.feature-card {
  opacity: 1;
}

@supports (animation-timeline: scroll()) {
  .feature-card {
    animation: reveal linear both;
    animation-timeline: view();
  }
}

動かないときの確認順

1. 対象ブラウザがanimation-timelineへ対応しているか
2. 実際にスクロールする要素と指定したscrollerが一致するか
3. animation短縮記法が後からtimelineを初期化していないか
4. スクロール量がなく、開始と終了が同じになっていないか
5. prefers-reduced-motionで無効化されていないか

animationを後から指定すると関連プロパティが初期化される場合があります。短縮記法を先、animation-timelineを後に書くと意図が明確です。

よくある質問

まとめ

スクロール領域全体の進捗にはscroll()、要素の出入りにはview()を使います。CSSで完結する見た目へ絞り、内容を隠さないフォールバックとprefers-reduced-motionを用意すると、安全に導入できます。

関連記事

• ScrollRevealの使い方
• CSSアニメーションの基本
• CSSレスポンシブWebデザインの基本

参照した公式資料

• MDN：CSS scroll-driven animations
• CSSWG：Scroll-driven Animations Level 1