GODRICH
#cssアニメーション#ボタン#ローディング#トランジション#スクロール#ダッシュボード#実用ui#デザイントレンド

【コピペOK】スクロール アニメーション CSS のみ 9選

· Godrich · 9種 · 8分で読める

スクロールSCSSReactCSSのみスクロール自動再生LPヒーロー

スクロール アニメーション css は、要素が画面に入った量やページ全体の読了率を animation-timeline に渡し、JavaScript を1行も書かずに動かす仕組みです。この記事では9種類を選び、view() と scroll(root) という2つのタイムラインだけで実装しました。

ふわっと表示01 fade-up-reveal 順番に表示02 stagger-list 文字ワイプ03 clip-text-reveal 画像カーテン04 image-curtain 読了プログレスバー05 scroll-progress-bar 縮むヘッダー06 sticky-header-shrink パララックス07 parallax-layers カウントアップ08 count-up-on-view 線が伸びるタイムライン09 line-draw-timeline

自動再生 · タイルを押すとその項目へ · すべて1つのzip

並び順は効果の種類ではなく、実際にページを開いてから閉じるまでの順番です。最初に見出しやカードが現れ（01〜04）、読んでいる間はページ全体の進み具合を伝え（05〜07）、最後は数字と年表で結果を残します（08〜09）。HTML と CSS だけでスクロール アニメーションを完結させるため、JavaScript のファイルは zip に1つも入っていません。項目ごとに要点となるコードだけを載せ、完全なファイルは zip の中です。 07 のパララックス1項目では層が足りないときは、それだけを9通りに広げたCSS パララックス スクロール9選があり、03 の文字ワイプから進んで文そのものを動かしたい場合はCSS 文字 アニメーション9選が続きになります。

01ふわっと表示

動きの内容

スクロールで要素が画面に入ると、下から24pxふわっと持ち上がりながらフェードインします。

ふわっと表示
新しいタブで開く

01 · ふわっと表示 — 計測 累積面積 38.606% · 動いたフレーム 13/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

24px멀리 48px페이드만

html css スクロール アニメーションの使いどころ

IntersectionObserver ではなく animation-timeline: view() だけで動くので、JavaScript は0行です。見出しやカード、段落などほぼすべての登場に使えます。

.card {
  @supports (animation-timeline: view()) {
    animation: fade-up-reveal $ease-out both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  @supports not (animation-timeline: view()) {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade-up-reveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

02順番に表示

どんな動きか

リストの各項目に同じアニメーションを指定するだけで、スクロールに合わせて上から順番に現れます。

順番に表示
新しいタブで開く

02 · 順番に表示 — 計測 累積面積 34.529% · 動いたフレーム 20/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

80ms빠르게 40ms역순

使いどころ

JavaScript の setTimeout で遅延を作る必要はありません。機能一覧や料金表、メンバー紹介に向いています。

.list__item {
  @supports (animation-timeline: view()) {
    animation: stagger-in $ease-out both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
  @supports not (animation-timeline: view()) {
    opacity: 1;
    transform: none;
  }
}

@keyframes stagger-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

03文字ワイプ

何が起きるか

見出しが clip-path ひとつで、左から右へワイプするように現れます。

文字ワイプ
新しいタブで開く

03 · 文字ワイプ — 計測 累積面積 2.99% · 動いたフレーム 13/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

600ms위에서가운데서

向いている場面

width や left ではなく clip-path だけを動かすので、レイアウトの再計算が起きません。ヒーローの見出しや大きな中見出しに向いています。

.headline {
  @supports (animation-timeline: view()) {
    animation: wipe-in $ease-spring both;
    animation-timeline: view();
    animation-range: entry 20% cover 60%;
  }
  @supports not (animation-timeline: view()) {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes wipe-in {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

04画像カーテン

動きの内容

画像を覆う色板が scaleX で右へたたまれるように消え、下の画像が現れます。

画像カーテン
新しいタブで開く

04 · 画像カーテン — 計測 累積面積 40.756% · 動いたフレーム 13/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

주황검정위로

使う場面

ポートフォリオや商品写真の一覧で、読み込みの一瞬を隠す効果です。

.frame__curtain {
  transform: scaleX(1);
  transform-origin: right;

  @supports (animation-timeline: view()) {
    animation: curtain-open $ease-spring both;
    animation-timeline: view();
    animation-range: entry 10% cover 50%;
  }
  @supports not (animation-timeline: view()) {
    transform: scaleX(0);
  }
}

@keyframes curtain-open {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

05読了プログレスバー

どんな動きか

ページ上部の3pxバーが、読んだ分だけ左から伸びていきます。

読了プログレスバー
新しいタブで開く

05 · 読了プログレスバー — 計測 累積面積 1.0% · 動いたフレーム 22/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

3px굵게 6px하단

使いどころ

view() ではなく scroll(root) を使うのが要点で、「画面に入ったか」ではなく「文書全体のどこまで読んだか」を表します。長い記事やドキュメントに向いています。

.bar {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left;

  @supports (animation-timeline: scroll()) {
    animation: fill-bar linear both;
    animation-timeline: scroll(root);
  }
  @supports not (animation-timeline: scroll()) {
    transform: scaleX(0);
  }
}

@keyframes fill-bar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

06縮むヘッダー

何が起きるか

position: sticky のヘッダーが、スクロールが進むほど scaleY で薄くなります。

縮むヘッダー
新しいタブで開く

06 · 縮むヘッダー — 計測 累積面積 7.342% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

64→48px로고만그림자 추가

向いている場面

height ではなく transform を動かすのは、height のアニメーションがブラウザに毎フレームのレイアウト計算をさせるためです。LP やブログのヘッダーに向いています。

.head {
  position: sticky;
  top: 0;
  transform-origin: top;

  @supports (animation-timeline: scroll()) {
    animation: shrink-header linear both;
    animation-timeline: scroll(root);
    animation-range: 0 200px;
  }
  @supports not (animation-timeline: scroll()) {
    transform: none;
  }
}

@keyframes shrink-header {
  from { transform: scaleY(1); }
  to   { transform: scaleY(.75); }
}

07パララックス

動きの内容

背景の円が0.3倍、前景のタイトルが0.5倍の速さで動き、奥行きが生まれます。

パララックス
新しいタブで開く

07 · パララックス — 計測 累積面積 13.925% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

0.5배0.3배두 겹

使う場面

同じ scroll(root) を使いながら移動量だけを変えるので、レイヤーが増えても仕組みは1つのままです。

.parallax__back {
  @supports (animation-timeline: scroll()) {
    animation: drift-back linear both;
    animation-timeline: scroll(root);
  }
}
.parallax__front {
  @supports (animation-timeline: scroll()) {
    animation: drift-front linear both;
    animation-timeline: scroll(root);
  }
}

@keyframes drift-back  { from { transform: translateY(0); } to { transform: translateY(-20px); } }
@keyframes drift-front { from { transform: translateY(0); } to { transform: translateY(-40px); } }

08カウントアップ

どんな動きか

数字が見えた瞬間に0から目標値まで上がります。

カウントアップ
新しいタブで開く

08 · カウントアップ — 計測 累積面積 3.302% · 動いたフレーム 14/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

1.2s천 단위 콤마% 붙이기

使いどころ

@property で --num を整数として登録するので、JavaScript なしで小数点のない数字がひとつずつ増えます。実績や統計セクションに向いています。

@property --num {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

.stat__num {
  --num: 0;
  counter-reset: num var(--num);
  &::after { content: counter(num); }

  animation: count-up 1.2s linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

@keyframes count-up {
  from { --num: 0; }
  to   { --num: 1280; }
}

09線が伸びるタイムライン

何が起きるか

縦線は scroll(root) で文書の進み具合に合わせて伸び、通過した点は view() で点灯します。

線が伸びるタイムライン
新しいタブで開く

09 · 線が伸びるタイムライン — 計測 累積面積 0.553% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

2px가로형점 없이

向いている場面

1つの効果の中で scroll() と view() を組み合わせているのがここだけの特徴です。沿革や手順、ロードマップに向いています。

.timeline__line {
  transform: scaleY(0);
  transform-origin: top;

  @supports (animation-timeline: scroll()) {
    animation: line-draw linear both;
    animation-timeline: scroll(root);
    animation-range: 0 200px;
  }
}
.timeline__dot {
  @supports (animation-timeline: view()) {
    animation: dot-light 320ms ease-out both;
    animation-timeline: view();
    animation-range: entry 30% cover 60%;
  }
}

@keyframes line-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes dot-light { from { opacity: .28; transform: scale(1); } to { opacity: 1; transform: scale(1.3); } }

どこで壊れるか — 落とし穴

なぜ animation-timeline だけなのか

css アニメーション フェードイン スクロールを含め、9つとも animation-timeline だけで動く理由は、IntersectionObserver を使うと JavaScript がスクロールのたびに要素の位置を再計算し、メインスレッドが混雑するからです。MDN の CSS scroll-driven animations にあるとおり、animation-timeline を使えばこの計算はブラウザのコンポジター側で行われ、メインスレッドをふさぎません。1つ目は05と06でやりがちなことで、animation-range を entry 0% cover 100% のように広く取ると、要素が画面の外にいる間もアニメーションが進んでしまい、スクロールを戻すと変な位置で止まって見えます。

2つ目 — 線と点のずれ

2つ目は、css アニメーション 線が伸びる スクロールの09を最初に作ったときのことです。線と点を同じ animation-range に合わせたら、線が伸び切る前に最後の点だけ先に光ってしまいました。線は scroll(root) で文書全体の進み具合に、点は view() で自分の位置に合わせるよう分けたところ、この崩れは直りました。

3つ目 — ブラウザ対応

3つ目はブラウザです。animation-timeline: view() と scroll() は Chrome・Edge 115 以降と Safari 26 以降が対応済みで、Firefox は 2026 年 9 月時点の安定版ではフラグの裏にあり、@supports で分岐していない実装だと非対応ブラウザで要素が透明なまま止まってしまいます。zip のファイルはすべて @supports not (animation-timeline: view()) のような分岐で最終状態をそのまま表示するようにしてあり、対応状況は MDN の animation-timeline 対応表 で確認できます。修正済みの9ファイルを開くには x5xz5uh4 という文字列が必要です。下のカードから zip を取ってください。

08 のカウントアップのように数字をスクロールへ結び付けると、この3つの落とし穴が一度に効いてきます。スクロールから切り離して数字だけを増やす方法は、CSS 数字 カウントアップ アニメーション9選にまとめてあります。

アクセシビリティ

動きを減らす設定のとき

9つとも prefers-reduced-motion: reduce で animation: none になり、スクロールしても動きません。ただし05のプログレスバーと09の線は「動きを止める」と「情報を消す」が別物なので、transform: scaleX(1) や scaleY(1) を残して、進捗や到達済みの状態だけは見えるようにしてあります。08のカウントアップだけは例外的に、動きを止めると同時に目標の数字をそのまま表示します。

@media (prefers-reduced-motion: reduce) {
  .card, .headline, .stat__num { animation: none !important; }
  .bar, .timeline__line { animation: none !important; transform: scaleX(1); }
}

スクロール以外の CSS アニメーションは CSS アニメーションのカテゴリ に、このサイトについては 紹介ページ にまとめています。

FAQ

スクロール アニメーション css のみで9つすべてを1つのページに入れても大丈夫ですか？

入れられますが、animation-timeline: scroll(root) を使う05と07は1つの文書につき1つが基本です。scroll(root) は文書全体の進み具合を見ているので、同じ考え方の効果を何個も置くと、どれがどこまで進んだか分かりにくくなります。view() を使う01〜04・08・09は要素ごとに独立しているので、いくつ置いても構いません。

React ではクラスの付け外しの代わりに何を使いますか？

zip の react/ フォルダのコンポーネントは IntersectionObserver ではなく、CSS の animation-timeline をそのまま使っています。08のカウントアップだけは目標値を --num という CSS カスタムプロパティに props で渡し、JavaScript は数値を計算しません。それ以外の8つはクラス名を1つ付けるだけで、状態管理は不要です。 きっかけがスクロールではなく開閉になる場面では、同じ「動きをJSに任せない」考え方が@starting-styleの側へ移り、その道筋はCSS モーダル アニメーション9選に書いてあります。

スマホでも同じように動きますか？

はい、動きます。iOS の Safari と Android の Chrome はどちらも animation-timeline: view() と scroll() に対応しているので、タッチでスクロールしても同じアニメーションが再生されます。ただし06の縮むヘッダーはアドレスバーの表示・非表示でビューポートの高さが変わる端末があるため、animation-range の数値をそのままにすると縮むタイミングが数十ピクセルずれることがあります。

解凍パスワードを入力してください

パスワードはこの記事の本文の中にあります。読み進めると出てきます。