コーポレートサイトのリニューアルで「スクロールすると要素がふわっと出てくる、あの動きを入れたい」という要望は定番です。ところが実装側からすると、これまでは悩ましい作業でした。Intersection Observer で要素の出現を監視し、クラスを付け外しして CSS アニメーションを起動する——動きはするものの、JavaScript のライブラリを一つ抱え込み、スクロールのたびに処理が走り、ページが重くなる。凝った演出ほど、表示速度とのトレードオフに頭を悩ませてきた方も多いはずです。
この構図が、CSS の標準機能で大きく変わりました。スクロール量に連動して進む「スクロール駆動アニメーション（scroll-driven）」に加え、2026年には要素が画面に入った瞬間に一度だけ再生する「スクロールトリガーアニメーション（scroll-triggered）」も登場しています。名前が似ていて混同されがちですが、この二つは動きの性質がはっきり違い、向く用途も分かれます。本記事では両者を区別したうえで、実務での選び方をコードとともに整理します。
「連動」と「合図」— まったく別の動き
まず、この二つは目的が違います。
| scroll-driven（駆動） | scroll-triggered（トリガー） | |
|---|---|---|
| 動きの性質 | スクロール量にアニメーションが連動 | 一定位置を越えたら決まった時間で再生 |
| スクロールを戻すと | 逆再生される | そのまま（戻らない） |
| 向く用途 | 読み進みバー・視差効果 | 要素の出現アニメーション |
scroll-driven は、スクロールの進み具合がそのままアニメーションの進行度になります。下げれば進み、戻せば逆再生され、止めれば止まる。読み進みバーやパララックスのように「スクロール位置と常に同期していてほしい」動きに向きます。
一方 scroll-triggered は、要素が指定した範囲に入ったことを「合図」に、あらかじめ決めた時間ぶんのアニメーションを最後まで再生します。スクロールを戻しても巻き戻りません。これは、かつて Intersection Observer でやっていた「画面に入ったら一度だけふわっと表示」を、JavaScript なしで実現するものです。要素の出現演出は本来こちらが適任で、scroll-driven で無理に代用すると、少し戻しただけで要素が消えかけるといった不自然さが出ます。
scroll-driven の書き方 — タイムラインを指定するだけ
scroll-driven の肝は、アニメーションに「時間」ではなく「スクロールという時間軸（タイムライン）」を割り当てる点です。ページ全体のスクロールに連動させる読み進みバーは、次のように書けます。
@keyframes grow-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.progress-bar {
transform-origin: left;
animation: grow-progress linear;
animation-timeline: scroll(root block);
}scroll(root block) が「ページ全体を縦方向にスクロールした量」をタイムラインにする指定です。animation-duration を書いていないのに動くのは、進行度をスクロールが決めるからです。
要素自身が画面に出入りする度合いに連動させたいときは、view() を使います。
@keyframes reveal {
from { opacity: 0; translate: 0 2rem; }
to { opacity: 1; translate: 0 0; }
}
.card {
animation: reveal linear both;
animation-timeline: view();
animation-range: entry 0% entry 100%;
}animation-range は、タイムライン上のどこからどこまでを再生区間にするかの指定です。entry 0% から entry 100% は「要素が下から入り始めてから完全に見えるまで」を意味します。ここを調整すると、演出が始まる位置と終わる位置を細かく制御できます。
出現演出は scroll-triggered が本命
「画面に入ったら一度だけ表示」を scroll-driven の view() で作ることもできますが、前述のとおりスクロールを戻すと逆再生され、演出としては落ち着きません。この用途のために新しく用意されたのが scroll-triggered で、要素が指定範囲に入ったことをきっかけに、通常のアニメーションを最後まで再生し、戻しても巻き戻さないという、まさに求めていた挙動をします。
scroll-triggered は Chrome が先行して搭載を始めた比較的新しい機能で、指定方法（トリガーの範囲や再生の振る舞いの書き方）も仕様の確定にあわせて更新されています。実装に取りかかる際は、思い込みの構文で書かず、MDN や Chrome for Developers の最新ドキュメントで現時点の書き方を必ず確認してください。ここは動きが速い領域です。CSS の新機能を業務サイトへ取り入れる際の全体的な考え方はモダン CSS のネイティブ機能まとめでも扱っています。
「対応していないブラウザ」をどう扱うか
業務サイトに載せるうえで避けて通れないのが、対応ブラウザの問題です。scroll-driven は Chromium 系（Chrome・Edge）と Safari の比較的新しいバージョンで使え、Firefox は現状フラグ付きでの実装にとどまります。scroll-triggered はさらに新しく、対応はこれからです。
ここで大事な考え方は、これらのスクロール演出を「あれば嬉しい飾り」として実装することです。対応していないブラウザでは、アニメーションが動かず、要素は最初から普通に表示される——つまり演出がないだけで、コンテンツは問題なく読める。この「動かなくても壊れない」形に保っておけば、対応ブラウザが広がるにつれて自然と演出が効くようになります。逆に、演出ありきでコンテンツの表示自体をアニメーションに依存させると、非対応環境で要素が見えなくなる事故につながります。基本のレイアウトは崩さず、その上に演出を重ねる。この順番を守るのが実務の鉄則です。
まず「連動か、合図か」を決めてから書く
スクロール演出は、JavaScript ライブラリなしで CSS だけで書ける時代に入りました。実装で迷わないための出発点は、作りたい動きが「スクロールに連動し続けるもの（scroll-driven）」なのか「通過を合図に一度だけ再生するもの（scroll-triggered）」なのかを最初に見極めることです。読み進みバーやパララックスは前者、要素の出現演出は後者。ここを取り違えなければ、コードは驚くほど短く済みます。
そのうえで、非対応ブラウザでも壊れない作りにしておく。この二点を押さえれば、軽くて保守しやすいスクロール演出を業務サイトに載せられます。
御社のコーポレートサイトに、重くならないスクロール演出を取り入れたい、あるいはリニューアルにあわせて表現を刷新したい——そうしたご相談は、グリームハブのHP制作・リニューアルのご相談からお寄せください。表示速度を落とさない演出設計から、サイトリニューアルの進め方まで、御社のサイトにあわせてご提案します。
