CSS だけのスクロールアニメーション、デザイナーはどう指定する？ 範囲・対象・量で渡す指定書の作り方

主要ブラウザでそろった、の正確な意味

web.dev の「New to the web platform in October」（2026年10月29日）によると、Chrome・Edge 115、Safari 26、Firefox 159 で使えるようになり、Baseline Newly available になりました。

ここで気をつけたいのは、Newly available は「最新版でそろった」という意味で、古いバージョンを使う人には届かないことです。そのため指定書には「動かない環境では、最初から完了の状態で表示する」と一行入れておくのが安全です。動きが付かなくても、内容はすべて読める。これを前提にしておけば、使える場面はぐっと広がります。

なお、仕様（CSS Scroll-driven Animations Module Level 1）は W3C では Working Draft（草案）の段階です。

タイムラインは2種類。「ページ」か「その要素」か

スクロール連動の動きは、何を物差しにするかで2種類に分かれます。

• scroll()（スクロールの進み具合）：ページやスクロールする箱が、どれだけスクロールしたか。上端で 0%、下端で 100%。読了バーや、ヘッダーの縮みに向きます。
• view()（要素の見え具合）：ある要素が画面に入ってから出るまで。カードやセクションの登場に向きます。

指定するときは、まず「この動きはページ全体の進み具合に合わせるのか、その要素が見えている間に合わせるのか」を決めます。ここが決まると、エンジニアは書き方を迷いません。CSS では animation-timeline: scroll() や animation-timeline: view() のように指定します。

「どこからどこまで」を決める：animation-range

view() を使うとき、動きの始まりと終わりは animation-range で決めます。MDN の「Understanding timeline range names」の説明を、デザイナーの言葉に置き換えると次のとおりです（縦スクロールの場合）。

entry と entry-crossing は、要素が画面より小さいときは同じ範囲で、画面より大きい要素（背の高いセクションなど）で違いが出ます。

範囲にはパーセントも付けられます。たとえば entry 0% entry 100% は「入り始めから入りきるまで」、entry 20% cover 50% のように組み合わせることもできます。デザインの段階では、「カードの上端が画面の下から入り始めたら開始、カードが全部見えたら完了」のように、要素と画面の端の関係で書けば十分です。名前はエンジニアが当てはめられます。

「何が・どれだけ」を決める

動かす対象と量は、始まりと終わりの2つの状態で書きます。

• 何が：カード全体なのか、画像だけなのか、見出しだけなのか。レイヤー名で書くと迷いません。
• どれだけ：開始の状態と完了の状態の値。例「透明度 0 → 1、下へ 48px → 0」。

対象は、位置・大きさ・回転（transform）と透明度（opacity）を基本にすると、エンジニアと話が早くなります。Chrome for Developers の解説「Animate elements on scroll with Scroll-driven animations」でも、メインスレッドから外して動かせることが利点に挙げられ、例では幅（width）ではなく transform を動かしています。幅や高さ、余白を動かすと周りのレイアウトも動くので、どうしても必要なときだけにしましょう。

時間（秒）は書かなくて構いません。スクロール連動では、動きの進み具合はスクロールの量で決まるからです。そのかわり、範囲の中での変化を一定にするか（linear）を決めておきます。ゆっくり始まる動き（ease-in など）を指定すると、時間ではなくスクロールの量に対してかかります。

動きを減らす設定とセットで渡す

OS には動きを減らす設定（iPhone の「視差効果を減らす」など）があり、CSS では prefers-reduced-motion で読み取れます。スクロール連動の動きは、この設定がオンの人には止めるのが基本です。

WCAG 2.2 の達成基準 2.3.3 Animation from Interactions（レベル AAA）は、操作で起こる動きのアニメーションを止められるようにすることを求めています（機能や情報の伝達に欠かせない動きを除く）。AAA は多くのサイトの目標（AA）より上の段階ですが、スクロールで起こる動きはまさにこの「操作で起こる動き」です。視差効果（パララックス）は、Understanding のページで多くの場合は欠かせない動きではない例として挙げられています。

デザイナーが決めておくのは、動きを減らす設定がオンのときに見せる「止まった状態」です。ふつうは完了の状態（透明度 1、位置 0）にします。開始の状態で止めてしまうと、内容が見えないままになるので注意してください。

エンジニアへの渡し方：指定書のひな形

ここまでの内容を、1つの動きにつき1行の表にまとめると、そのまま実装の材料になります。

この表を実装すると、たとえば次のような CSS になります（Chromium 153 で、スクロール位置ごとの透明度と位置を確かめました。Firefox では確かめていません）。

/* 動かすのは、対応していて、動きを減らす設定がオフのときだけ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .news-card {
      animation: fade-up linear both;
      animation-duration: 1ms; /* Firefox 向け（下の補足） */
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
  }
}

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

動かない環境と、動きを減らす設定がオンの環境では、アニメーションの指定がまるごと読まれないので、カードは最初から完了の状態で表示されます。指定書の最後の2行が、そのままこの書き方に対応しています。

animation-duration には補足があります。MDN は、Firefox では animation-duration の指定がないと動きが付かないため 1ms を指定するよう勧めています。一方、Chrome for Developers の解説（2023年公開）は auto を指定するよう書いています。どちらにするかは、エンジニアが対象のブラウザで確かめて決める項目として、指定書では触れなくて構いません。

Figma で動きの見本を作るなら、Figma Sites のヘルプ「Add interactions to an element」に、スクロールに合わせて大きさ・位置・透明度・回転を変える Scroll transform が載っています。Figma Sites は、同じヘルプで Config 2025 にオープンベータとして公開されたと書かれていて、使えるプランもヘルプに条件があるので、先に確かめてください。ただし見本の動きと CSS の範囲の名前は一対一ではないので、見本に加えて上の表を渡すと確実です。

まとめ

• スクロール連動アニメーションは Chrome・Edge 115、Safari 26、Firefox 159 でそろい、Baseline Newly available になった。古いバージョンでは動かないので「動かないときは完了の状態」と決めておく
• 動きは「物差し（scroll / view）・範囲・対象・量」で指定する。範囲は要素と画面の端の関係で書けば、エンジニアが animation-range に当てはめられる
• 対象は transform と opacity を基本にし、動きを減らす設定がオンのときに見せる止まった状態（ふつうは完了の状態）までを指定書に入れる

動きの指定書を、デザインシステムのルールとして整えたいときは、MODS BASE にもご相談ください。

参考

• New to the web platform in October（web.dev）
• Firefox 159 release notes for developers (Stable)（MDN）
• WebKit Features in Safari 26.0（WebKit）
• Understanding timeline range names（MDN）
• animation-duration CSS property（MDN）
• Animate elements on scroll with Scroll-driven animations（Chrome for Developers）
• Scroll-driven Animations（W3C）
• Understanding SC 2.3.3 Animation from Interactions (Level AAA)（W3C）
• Add interactions to an element（Figma ヘルプ）