2026年7月30日

2026年5月、CSS `animation-timeline` と `view()` が実現する「スクロール駆動アニメーション」の本格到来

CSSだけでスクロールをアニメーション化する時代が来た

2026年5月、Webプラットフォームに animation-timeline のスクロールバリエーションが安定して追加された。具体的には scroll() と view() という2つの関数が、主要ブラウザすべてで Baseline 入りした。これにより、従来Intersection ObserverとJavaScriptの組み合わせで実装していた「要素がスクロールに応じてフェードイン／パララックスする」挙動が、CSSだけで完結する。

開発者にとっての核心は、ランタイムのJS負荷を減らせる点と、宣言的なコードがメンテナンス性を高める点だ。すでに2025年から一部ブラウザで試験実装されていたが、2026年5月のアップデートで互換性テーブルが一気に統一された。今すぐプロダクションで使い始めるべきタイミングと言える。

なぜ今、スクロール駆動アニメーションが標準化されたのか

背景には「パフォーマンスと開発者体験の両立」がある。従来のJSベース実装では、メインスレッドでスクロール位置を監視し、スタイル変更をトリガーしていた。これがレイアウトスラッシングの原因になりやすかった。CSS Scroll-Driven Animations は、ブラウザのコンポジタースレッドでアニメーションを完結させる。つまり、メインスレッドをブロックせずに60fpsを維持できる。

さらに view() 関数は、要素がビューポートに入った／出たタイミングを直接アニメーションの進行度にマッピングする。例えば「要素の下端がビューポート下端に触れた瞬間にアニメーションが始まり、上端がビューポート上端に達したときに完了する」といった細かな制御が、view(block) と range の組み合わせで数行のCSSに収まる。

`scroll()` と `view()` の使い分け

scroll(): スクロールコンテナ全体のスクロール位置に基づく。ヘッダーの縮小やプログレスバーなど、ページ全体の進行に応じたアニメーションに最適。
view(): 特定要素のビューポート内での可視範囲に基づく。要素ごとの出現アニメーションや、画像の遅延読み込みのプレースホルダーなどに使う。

両方とも animation-timeline プロパティに指定する。従来の animation-duration は無視され、代わりにスクロール量や可視割合が進捗を決める。

実務における注意点と落とし穴

最も注意すべきは レガシーブラウザの扱い だ。Baseline 2026 に含まれるとはいえ、iOS Safari の一部古いバージョンでは未対応。フォールバックとして @supports (animation-timeline: scroll()) を使い、非対応ブラウザには従来のJS実装を提供する戦略が現実的。

また、view() の range 指定は少し直感とズレる。例えば「要素が完全に見えている間だけアニメーション」を実現するには view(block 0% 100%) ではなく view(block 100% 0%) と書く必要がある。この引数の順序（entry-crossing から exit-crossing）に慣れるまで、ミスが起きやすい。開発初期は Range Inspector（Chrome DevTools の機能）を使って進捗値を可視化しながら調整するのが安全だ。

パフォーマンスの実際

理論上はコンポジターで動作するが、transform や opacity 以外のプロパティ（高さ、色など）をアニメーションさせるとペイントが発生する。その場合、メインスレッドへの依存がゼロではない。パフォーマンスを最大化するには、アニメーションプロパティを transform と opacity に限定 するのが鉄則。

今後1年の展望

スクロール駆動アニメーションが安定したことで、フレームワーク側の対応も加速するだろう。React や Vue ではラッパーコンポーネントが不要になり、テンプレート内で直接 animation-timeline を指定するパターンが増える。また、random() 関数と組み合わせることで、スクロール位置に応じてばらつきのある出現アニメーションを宣言的に実装するという新たな表現も広がる。

一方で、CSSだけで完結するという魅力と裏腹に、「JSのロジックを一切書かない」という極端な設計は避けるべきだ。スクロール位置に応じた複雑なロジック（例：特定のセクションを通過したらUIを切り替える）は、依然としてJSの方が適切な場合がある。CSSの得意範囲とJSの得意範囲を、改めて見極める時期に来ている。