スクロール駆動アニメーションとは何ですか？

ページのスクロール位置や要素の表示状態に連動してCSSアニメーションを制御できる仕組み。JavaScriptなしで、スクロールに応じたリッチな視覚効果を実装できる。

スクロール駆動アニメーションのポイントは？

スクロール位置に連動してCSSアニメーションの進行を制御できるネイティブCSS機能。scroll-timelineとview-timelineの2つのタイムライン種類がある。JavaScriptのスクロールイベント監視が不要になり、パフォーマンスが大幅に向上する

【スクロールくどうアニメーション】

💡 スクロールがアニメーションの指揮者になる、CSSだけで実現するリッチ演出

📌 このページのポイント

スクロール駆動アニメーションのイメージ

ひよこ

スクロールでアニメーションするサイトってよくあるけど、今まではどうやって作ってたの？

ペンギン先生

JavaScriptでscrollイベントやIntersection Observerを使って、スクロール量を監視してアニメーションを制御していたんだ。でもJavaScriptの処理はメインスレッドで動くから、スクロールがカクつくこともあったんだよ

ひよこ

CSSだけでできるようになったってこと？

ペンギン先生

そうだよ。animation-timelineプロパティにscroll()やview()を指定するだけで、スクロール位置に連動したアニメーションが作れるんだ。ブラウザのコンポジタースレッドで処理されるから、60fpsのなめらかな動きが実現できるよ

ひよこ

scroll()とview()って何が違うの？

ペンギン先生

scroll()はスクロールコンテナ全体の位置に連動するタイムラインで、プログレスバーのような用途に向いているよ。view()は特定の要素がビューポートに入ってから出るまでの間を0%〜100%として使えるんだ。要素のフェードインなどに便利だね

ひよこ

@keyframesはそのまま使えるの？

ペンギン先生

まさにそこがポイントで、既存の@keyframesをそのまま流用できるんだ。animation-timelineを追加するだけで、時間ベースだったアニメーションがスクロールベースに切り替わる。既存のアニメーション資産を活かせるのが嬉しいところだね

まとめ：ざっくりこれだけ覚えればOK！

「スクロール駆動アニメーション」って出てきたら「スクロールに連動してCSSアニメーションが動く仕組み」と思えればだいたいOK！

📖 おまけ：英語の意味

「Scroll-driven Animations」＝スクロール駆動のアニメーション

💬 driven は「駆動される」という意味。スクロールという操作がアニメーションを「駆動」する、つまり動かすエンジンになるということだよ