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

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

最終更新: 2026年10月3日

💡 時計ではなく、スクロールで進むアニメーション

スクロール位置や要素の見え方を基準に、アニメーションを進める仕組み。CSSのanimation-timelineなどで指定でき、読書の進み具合や要素が現れる演出に使えます。

📌 このページのポイント

scroll()とview()の用途の例。ブラウザ対応や動きを減らす設定への配慮も必要です。

ひよこ

スクロールすると動く演出は、何で動かすの？

ペンギン先生

この仕組みでは、スクロールに対応するタイムラインをアニメーションへ結び付けるよ。CSSならanimation-timelineにscroll()やview()を指定できる。時間がたつと進む代わりに、スクロールで進み具合が変わるんだ。

ひよこ

scroll()とview()は何が違うの？

ペンギン先生

scroll()は選んだスクロール領域の位置が基準。記事の読書プログレスバーなどに使えるよ。view()は対象の要素が、そのスクロール領域に対してどこにあるかが基準。カードが入ってくるときの演出などに使えるんだ。

ひよこ

CSSに書けば、いつでも滑らか？

ペンギン先生

ブラウザがスクロールと連動させて処理できる利点はあるけど、60fpsが保証されるわけではない。動かすプロパティや画面の処理、端末にもよるよ。@keyframesで変化を定め、タイムラインで進行を決める、と分けて考えよう。

ひよこ

実際のサイトでは、何を確認すればいい？

ペンギン先生

使うブラウザが機能に対応するか、未対応でも内容を読めるかを確認しよう。animationの一括指定はanimation-timelineをリセットするので、指定順にも注意。prefers-reduced-motionで動きを減らす設定へ配慮し、演出がなくても情報が伝わるようにしたいね。

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

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

📖 おまけ：英語の意味

「Scroll-driven Animations」＝スクロールを基準に動くアニメーション

💬 Drivenは動かす基準になるという意味です。時間がたつと進む通常のアニメーションに対して、スクロールや要素の表示位置を進行の基準にします。

参考資料