静的マーケページやドキュメントサイトでは、パララックス、読了プログレス、セクションのフェードインが今もなおscrollイベントとIntersectionObserverに依存しがちです。CSSスクロール駆動アニメ（scroll-timeline、animation-timeline、view()のビュータイムライン）は、キーフレーム進行をスクロール位置や可視率へ直接結びつけ、バンドルサイズとメインスレッド負荷を抑えます。MPAや静的ジェネレータ出力のようにランタイムバンドルを増やしたくないチーム向けに、Safari/WebKit実機での差分に焦点を当てます。ページ遷移の連続性まで含める場合はView Transitions API と静的MPAを、チャネル差の切り分けにはSafari Technology Preview と安定版の比較を参照してください。
静的サイトでタイムラインが効く理由
命令型のスクロール処理は、幾何取得のたびにレイアウトを同期させやすく、モバイルSafariでは入力遅延と相まってカクつきが目立ちます。宣言的CSSに移すと、条件が揃えばコンポジタ側でアニメを進められるケースが増え、ユーザー体感が安定しやすくなります。静的HTMLチームにとっては、クライアントJSを増やさずにプロダクトマーケの要望へ応えやすい点も大きいです。
2026年初頭の公開テレメトリでは、scroll-timeline系を完全に満たさない環境がデスクトップでおおよそ5〜8%残るとされます。マーケは動きを求め、エンジニアは漸進的強化を求める——その板挟みを@supportsと静的フォールバックで処理してください。
scroll-timelineとビュー
スクロールタイムラインはスクロールコンテナの距離に同期し、ビュータイムラインは要素がスクロールポート内でどれだけ見えているかに同期します。後者は「セクションが見えたらふわっと出す」系を、セクションごとのオブザーバ地獄なしで実装するのに向きます。animation-rangeで「どのスクロール区間が0〜100%に相当するか」を切り取れば、昔ながらのscrollY割り算をブラウザに任せられます。
アクセシビリティではprefers-reduced-motion: reduceを必ず扱い、動きを抑えたユーザーに読めない半透明状態を残さないでください。デザインシステムに「装飾か情報か」を明記すると議論が早く終わります。
最小コード例
.reveal {
animation-name: fade-slide;
animation-duration: 1s;
animation-timing-function: linear;
animation-timeline: view();
animation-range: entry 0% cover 40%;
}
@keyframes fade-slide {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}同じクラスを複数セクションで使っても要素ごとにビューインスタンスが分かれるため、データ属性だらけの観測器より保守しやすいです。全文進捗バーならルートスクロールにタイムラインを結び、レンジを文書全体に伸ばします。
2026年のブラウザ観点
| エンジン | スクロール連動 | 静的QAメモ |
|---|---|---|
| Chromium | 強い | タイムラインのスクラブが可能。 |
| Firefox | 対応（版確認） | viewレンジを仕様例と照合。 |
| Safari安定版 | 新macOSで利用 | マイナーでスクロール挙動が変わる。 |
| 古いモバイルWebKit | 部分的〜未対応 | @supportsと reduced-motion 必須。 |
仕様ドラフト期の別名が残りやすいので、ビルド出力に実際に含まれるプロパティ一覧を社内Wikiで一元管理してください。
SafariチェックとクラウドMac
Linux CIはゴムバンド終端での合成スケジューリングやSFフォントのサブピクセル差を再現しきれません。週30〜45分、Appleシリコン実機で安定版とSTPを併用してください。チェックリスト例：PRにSafari版情報を残す、100/125/150%ズーム、ネストしたoverflow:auto、印刷スタイルで透明度が残らないこと。
調達が間に合わないときはApple Silicon Mac miniをクラウドで短時間借り、SSHでデプロイ、VNCでSafari操作、目安$16.9/日程度。実験フラグを触る前にディスクスナップショットを取得し、設定破損に備えます。
ステージングのContent-Security-Policyとフォントホストを本番に合わせてください。行高のわずかな差がスクロール演出を「カクつく」と感じさせ、原因はCSSではなく遅延フォントであることがあります。
レビュー文化として、スクロールタイムラインに触れるPRにはChromiumとSafariの30〜60秒録画を添付し、ビルドツールの版と圧縮CSSのハッシュを説明欄に書くと、サポートが顧客チケットを素早く分類できます。
FAQ
CSSスクロール駆動アニメはJavaScriptのscrollリスナーをすべて置き換えますか？
視覚効果の多くは置き換え可能ですが、計測・複雑なジェスチャ・APIと状態を同期する処理は依然としてJavaScriptが必要です。CSSは表現、JSは振る舞いとデータという分離を維持してください。
2026年時点でSafariのscroll-timeline対応で注意することは？
caniuse、WebKitリリースノート、手元のSTP/安定版でマイナーごとに再確認してください。古いiOS WebKitは未対応が残るため@supportsでの段階的強化が必要です。
物理Macなしでスクロール連動CSSを正しく検証できますか？
自動化されたWebKitスモークは有効ですが、ゴムバンドスクロールやフォントラスタライズ、コンポジタの扱いは実機と差が出ます。週に30〜45分、実機またはクラウドMac miniのVNCで目視サインオフを確保してください。
Mac miniはWebKitスクロール検証の静かな基準機です。MacHTMLはSSH/VNC付きのベアメタルレンタルで、スプリント単位で環境を立ち上げ証跡を残し、終われば解放できます。