Limited support 限定的。Chrome・Edgeで対応、Firefox未対応、Safari 26から対応予定。プログレッシブエンハンスメントとして使用。

Scroll-driven animations

animation-range は CSS の一括指定プロパティで、タイムラインに沿ったアニメーションの適用範囲の先頭と末尾を設定します。つまり、タイムラインのどこでアニメーションが始まり、どこで終わるかを設定するために使用します。

アニメーションスクロール

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
animation-range
115
115
26
115
26
DOM API
ScrollTimeline

ScrollTimeline はWeb Animations API のインターフェイスで、スクロール進行タイムラインを表します（詳しくは CSS スクロール駆動アニメーション を参照してください）。
115
115
26
115
26
axis

axis は ScrollTimeline インターフェイスの読み取り専用のプロパティは、タイムラインの進行軸を表す列挙値を返します。
115
115
26
115
26
ScrollTimeline

ScrollTimeline() コンストラクターは新しい ScrollTimeline オブジェクトインスタンスを作成します。
115
115
26
115
26
source

source は ScrollTimeline インターフェイスの読み取り専用プロパティで、スクロール位置がタイムラインの進行、つまりアニメーションを駆動しているスクロール要素（スクローラー）への参照を返します。
115
115
26
115
26
ViewTimeline

ViewTimeline はWeb Animations API で、ビュー進捗ライムラインを表します（詳しくは CSS スクロール駆動アニメーションを参照してください）。
115
115
26
115
26
endOffset

endOffset は ViewTimeline インターフェイスの読み取り専用プロパティで、タイムラインのスクロールの終点（進行度 100%）の位置を表す CSSNumericValue を、スクロールで溢れたコンテンツの区分の開始位置からのオフセットとして返します。
115
115
26
115
26
startOffset

startOffset は ViewTimeline インターフェイスの読み取り専用プロパティで、タイムラインのスクロール開始位置（進行度0%）を表す CSSNumericValue を、スクロールで溢れたコンテンツの部分の始めからのオフセットとして返します。
115
115
26
115
26
subject

subject は ViewTimeline インターフェイスの読み取り専用のプロパティで、その最も近い祖先のスクロール可能要素（スクローラー）内の可視性がタイムラインの進行を駆動している主体要素への参照を返します。
115
115
26
115
26
ViewTimeline

ViewTimeline() コンストラクターは、新しい ViewTimeline オブジェクトインスタンスを生成します。
115
115
26
115
26
その他
css.properties.animation-range-end

animation-range-end は CSS のプロパティで、アニメーションが終了するタイムライン上の点を設定します。
115
115
26
115
26
CSS プロパティ
normal
115
115
26
115
26
その他
css.properties.animation-range-start

animation-range-start は CSS のプロパティで、アニメーションが開始するタイムライン上の点を設定します。
115
115
26
115
26
CSS プロパティ
normal
115
115
26
115
26
その他
css.properties.animation-timeline

animation-timeline は CSS のプロパティで、 CSS アニメーションの進行を制御するのに使われるタイムラインを指定します。
115
115
110
26
115
26
CSS プロパティ
scroll

scroll() は CSS 関数で、animation-timeline と共に使用することで、無名スクロール進行タイムラインを作成し、そのタイムラインのスクローラーと軸を定義します。
115
115
110
26
115
26
view

view() は CSS 関数で、animation-timeline プロパティと組み合わせて使用され、要素が最も近いscroll container内で表示範囲に入るタイミングに基づいて、無名ビュー進行タイムラインを生成します。追跡する軸とオプションのインセットを調整することで、要素が「表示範囲内」と見なされるタイミングを制御できます。
115
115
114
26
115
26
animation-timeline included

'animation-timeline' が短縮表現に含まれる
115
115
115
その他
css.properties.scroll-timeline

scroll-timeline は CSS の一括指定プロパティで、名前付きスクロール進行タイムライン を定義します。これは、スクロール可能な要素（スクローラー）を上下（または左右）にスクロールすることで進行します。
115
115
111
26
115
26
css.properties.scroll-timeline-axis

scroll-timeline-axis は CSS のプロパティで、スクロール可能な要素（スクローラー）をスクロールすることで進行するスクロール駆動アニメーションに使用するタイムラインを提供するのに使用されるスクロールバーの方向を指定するために使用します。
115
115
111
26
115
26
CSS プロパティ
block
115
115
26
115
26
inline
115
115
26
115
26
x
115
115
26
115
26
y
115
115
26
115
26
その他
css.properties.scroll-timeline-name

scroll-timeline-name は CSS のプロパティで、スクロール可能な要素（スクローラー）を上下（または左右）にスクロールすることで進行する名前付きスクロール進行タイムラインの名前を定義するために使用します。 scroll-timeline-name はタイムラインを提供するスクローラーに設定します。
115
115
111
26
115
26
css.properties.timeline-scope

timeline-scope は CSS のプロパティで、名前付きアニメーションタイムラインのスコープを変更します。
116
116
26
116
26
CSS プロパティ
all
116
116
26
116
26
none
116
116
26
116
26
その他
css.properties.view-timeline

view-timeline は CSS の一括指定プロパティで、スクロール可能な要素（スクローラー）内の要素（主体要素として呼ばれる）の可視性の変化に基づいて進行する名前付きビュー進行タイムラインを定義するために使用します。 view-timeline は主体要素に設定します。
115
115
114
26
115
26
css.properties.view-timeline-axis

view-timeline-axis は CSS のプロパティで、名前付きビュー進行タイムラインで使用されているスクロールの方向を指定します。
115
115
114
26
115
26
CSS プロパティ
block
115
115
26
115
26
inline
115
115
26
115
26
x
115
115
26
115
26
y
115
115
26
115
26
その他
css.properties.view-timeline-inset

view-timeline-inset は CSS のプロパティで、ビュー進行タイムラインのアニメーションの主体要素が可視であるとみなされるスクロールポート（詳細はScroll containerを参照）の位置の調整を表す 1 つまたは 2 つの値を指定するために使用します。別の言い方をすると、これはタイムラインの位置をオフセットする開始値や終了値のインセット（またはアウトセット）を指定することができます。
115
115
26
115
26
CSS プロパティ
auto
115
115
26
115
26
その他
css.properties.view-timeline-name

view-timeline-name は CSS のプロパティで、要素に関連付けられた 1 つ以上の名前付きビュー進行タイムライン の名前を指定します。
115
115
111
26
115
26
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 3件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
実装メモ
  • Firefox 112 より前では、ゼロのスクロール範囲は 0% ではなく 100% として扱われます。 バグ 1780865 を参照してください。
  • 非推奨の「水平」軸と「垂直」軸の値はサポートされますが、「x」と「y」の値はサポートされません。
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • 現在サポートはリセットのみです。 `animation` を含めると、以前に宣言された `animation-timeline` 値が `auto` にリセットされますが、`animation-timeline` を `animation` 経由で設定することはできません。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • 現在サポートはリセットのみです。 `animation` を含めると、以前に宣言された `animation-timeline` 値が `auto` にリセットされますが、`animation-timeline` を `animation` 経由で設定することはできません。
注釈 2件
制限事項
  • このブラウザでは部分的にしか実装されていません
実装メモ
  • 現在サポートはリセットのみです。 `animation` を含めると、以前に宣言された `animation-timeline` 値が `auto` にリセットされますが、`animation-timeline` を `animation` 経由で設定することはできません。
注釈 4件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
実装メモ
  • 短縮プロパティの構文では、名前、次に軸の固定順序が使用されます。
  • 非推奨の「水平」軸と「垂直」軸の値はサポートされますが、「x」と「y」の値はサポートされません。
  • `@scroll-timeline` at-rule は、省略表現のプロパティ `scroll-timeline-name` および `scroll-timeline-axis` と省略表現のプロパティ `scroll-timeline` に置き換えられます。
注釈 4件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
実装メモ
  • 短縮プロパティの構文では、名前、次に軸の固定順序が使用されます。
  • 非推奨の「horizo​​ntal」値と「vertical」値はサポートされますが、「x」値と「y」値はサポートされません。
  • `@scroll-timeline` at-rule は、省略表現のプロパティ `scroll-timeline-name` および `scroll-timeline-axis` と省略表現のプロパティ `scroll-timeline` に置き換えられます。
注釈 3件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
実装メモ
  • 短縮プロパティの構文では、名前、次に軸の固定順序が使用されます。
  • `@scroll-timeline` at-rule は、省略表現のプロパティ `scroll-timeline-name` および `scroll-timeline-axis` と省略表現のプロパティ `scroll-timeline` に置き換えられます。
注釈 1件
削除済み
  • このバージョンで機能が削除されました (138)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (138)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (138)
注釈 2件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
実装メモ
  • `x` 値と `y` 値に加えて、非推奨の `horizo​​ntal` 値と `vertical` 値もサポートされるようになりました。
注釈 2件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
実装メモ
  • `x` 値と `y` 値に加えて、非推奨の `horizo​​ntal` 値と `vertical` 値もサポートされるようになりました。
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります

基本構文

CSS 
.progress-bar {
  animation: grow-progress linear;
  animation-timeline: scroll();
}

@keyframes grow-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.reveal {
  animation: fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

ライブデモ

Scroll() progressba-

Scroll-driven animations Scroll() progressba- demo.

プレビュー全画面表示

View() fade in

Scroll-driven animations View() fade in demo.

プレビュー全画面表示

Animation-range specified

Scroll-driven animations Animation-range specified demo.

プレビュー全画面表示

実務での使いどころ

  • スクロールプログレスバー

    ページのスクロール量に応じてプログレスバーが伸びるUIをCSSだけで実装。

  • スクロール連動フェードイン

    要素がビューポートに入る際にフェードインするアニメーションをJSなしで実現。

注意点

  • Firefoxは未対応のため、JSフォールバックを用意する必要がある。
  • 複雑なスクロールアニメーションはモバイルでのスクロール体験を損なう可能性がある。

フォールバック戦略

CSS 
/* JS フォールバック: Intersection Observer で代替 */
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

アクセシビリティ

  • スクロール連動アニメーションは prefers-reduced-motion で無効化し、コンテンツが即座に表示されるようにする。

参考リンク