もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.

Scroll-driven Animations とは

CSS Scroll-driven Animations は、スクロール位置に連動してアニメーションを制御できるCSS/Web APIの仕組みです。従来はJavaScriptでscrollイベントを監視する必要がありましたが、純粋なCSSだけで実現できるようになりました。

デモ

https://atwork.co.jp/parallax-demo.html

2つのタイムライン

Scroll Progress Timeline（スクロール進行タイムライン）

スクロールコンテナの上から下（または左右）へのスクロール量に基づくタイムライン。

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

.box {
  animation: fade-in linear;
  animation-timeline: scroll(); /* ページ全体のスクロールに連動 */
}

View Progress Timeline（ビュー進行タイムライン）

要素がビューポートに入ってから出るまでの進行度に基づくタイムライン。

.card {
  animation: slide-in linear;
  animation-timeline: view(); /* 要素がビューに入るタイミングに連動 */
  animation-range: entry 0% entry 100%; /* 入場時のみアニメーション */
}

animation-rangeで範囲を指定

値	意味
entry	要素がビューポートに入る
exit	要素がビューポートから出る
cover	要素がビューポートを覆い始めてから覆い終わるまで
contain	要素全体がビューポート内に収まっている間

実用的な使用例

プログレスバー（読書進捗）

#progress-bar {
  position: fixed;
  top: 0;
  width: 0%;
  height: 4px;
  background: royalblue;
  animation: grow-bar linear;
  animation-timeline: scroll(root);
}

@keyframes grow-bar {
  to { width: 100%; }
}

スクロール連動フェードイン

.section {
  opacity: 0;
  animation: fade-up linear forwards;
  animation-timeline: view();
  animation-range: entry 0% entry 60%;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

ブラウザ対応状況（2026年現在）

	CSS Scroll-driven	JS (Intersection Observer等)
パフォーマンス	◎ メインスレッド外で動作	△ JSのオーバーヘッドあり
記述量	少ない	多い
柔軟性	やや限定的	高い
デバッグ	やや難しい	容易

まとめ

• スクロール量・要素の表示状態に連動したアニメーションをCSSだけで書ける
• animation-timeline: scroll() / view() が核心
• パフォーマンスが良く、コードが簡潔になる
• Safariの対応がまだ不完全なので、本番では要確認