CSSスクロールアニメーション23種｜コピペ+AIプロンプト
スクロールは閲覧者がページを進める唯一の操作であり、そこに動きを紐づけると「読み進めた実感」が生まれます。ここではスクロール連動のアニメーションを23種類集めました。CSSだけで完結する animation-timeline の新仕様、交差監視による従来型、GSAP ScrollTrigger を使う本格的なものまで、実装コストの違う選択肢を並べています。
スクロールアニメーション · 23 EFFECTS
実装の勘所
まずCSSだけで足りるか確認する
「見えたらフェードイン」程度なら animation-timeline: view() の2行で済みます。ライブラリを入れる前に、CSSネイティブで要件を満たせないか確認してください。対応ブラウザが不安な場合も、@supports のフォールバックを書けば安全に導入できます。
スクロールを奪わない
スクロールを乗っ取って横移動させたり、進行を止めて演出を挟んだりする実装は、閲覧者の操作感を壊します。使う場合は区間を短く保ち、必ずスクロールで抜けられるようにしてください。
prefers-reduced-motion に対応する
スクロール連動の動きは、動きに酔いやすい人にとって最も負担が大きい種類です。reduce 指定時はアニメーションを止め、最終状態を表示するようにしてください。
FAQ
Q. animation-timeline と IntersectionObserver はどちらを使うべきですか？
新規実装で「見えたら動く」だけならCSSの animation-timeline: view() が最短です。スクロールを戻したときに巻き戻る挙動も自動で付きます。一方、発火時に別の処理（計測イベントの送信、データ取得）も走らせたい場合や、一度だけ実行したい場合は IntersectionObserver が適しています。
Q. スクロールアニメーションが重いのはなぜですか？
scroll イベントの中でレイアウトを読み書きしていることがほとんどの原因です。getBoundingClientRect と style の書き込みを交互に行うと、毎フレーム強制的な再レイアウトが発生します。CSSの animation-timeline や IntersectionObserver に置き換えると、この問題自体が消えます。
Q. コードは無料で使えますか？
はい。Motion Lab のコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。商用プロジェクトでもそのまま利用できます。
他のカテゴリを見る
全199種類を技術別（CSS / JS / Tailwind / Framer Motion / GSAP）で絞り込むなら カタログ一覧、 長文の解説を読むなら ガイド、 AIエージェントでの実装手順は Claude Code でWebアニメーションを実装する へ。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスクPR
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
CREATOR TOOLS · スクール（PR）
※本サイトはアフィリエイトリンクを含みます。リンク経由のご購入・お申し込みで運営者が紹介料を受け取る場合があります。