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

1. はじめに

この仕様書は、 スクロールコンテナのスクロール進行度に基づいて アニメーションの進行を制御するための仕組みを定義します。 これらのスクロール駆動アニメーションは、 時計時間ではなくスクロール位置に基づいたタイムラインを利用します。 本モジュールはWeb Animations APIに基づく命令型APIと、 CSS Animationsに基づく宣言型APIの両方を提供します。[WEB-ANIMATIONS-1]

スクロール駆動タイムラインには2種類あります：

• スクロール進行タイムラインは、特定のスクロールコンテナのスクロール進行度に結び付けられています。

• ビュー進行タイムラインは、ボックスのビュー進行度とスクロールポートを通じて結び付けられています。

注: スクロール駆動アニメーションは、進行がスクロール位置に連動するものであり、 スクロールトリガーアニメーション（スクロール位置によって開始されるが進行は時間で制御されるもの）とは異なります。

1.1. 他の仕様との関係

Web Animations [WEB-ANIMATIONS-1]は、 Webプラットフォーム上のアニメーションの抽象的な概念モデルを定義しており、 モデル要素としてアニメーションやそのタイムライン、 関連するプログラミングインターフェースなどが含まれます。 本仕様はWeb Animationsモデルを拡張し、 スクロール駆動タイムラインを定義し、 それらがアニメーションの進行を制御して スクロール駆動アニメーションを作成できるようにします。

本仕様はこれらの概念を操作するプログラミングインターフェースと、 CSS Animations [CSS-ANIMATIONS-1]にこれらの概念を適用するCSSプロパティの両方を導入します。 CSSプロパティの挙動がプログラミングインターフェースで記述されている場合でも、 ユーザーエージェントがスクリプトをサポートしていなくても、 下層のプログラミングインターフェースが存在するかのようにCSS機能を実装することでこの仕様に準拠できます。

CSSのほとんどの操作（セレクターの一致を除く）同様、 本仕様の機能はフラット化要素ツリー上で動作します。

1.2. 非同期スクロールとの関係

一部のユーザーエージェントは、レイアウトやスクリプトとは非同期でスクロールをサポートしています。 本仕様はそのようなアーキテクチャとの互換性を意図しています。

具体的には、本仕様ではスクロール駆動効果を 効果サンプル毎にスクリプトを実行する必要のない方法で記述できます。 非同期スクロールをサポートするユーザーエージェントは、これらの効果のサンプリングも非同期で行うことができます（必須ではありません）。

1.3. 値の定義

本仕様はCSSプロパティ定義の慣例（[CSS2]）と、 値定義構文（[CSS-VALUES-3]）に従います。 本仕様で定義されていない値型はCSS Values & Units [CSS-VALUES-3]で定義されています。 他のCSSモジュールとの組み合わせにより、これらの値型の定義が拡張される場合もあります。

各プロパティ定義に記載された値に加え、 本仕様で定義されるすべてのプロパティは CSS全域キーワードもプロパティ値として受け入れます。 可読性のため、明示的な記載は省略されています。

2. スクロール進行タイムライン

スクロール進行タイムラインは、 特定の軸に沿ったスクロールコンテナの スクロール位置の進行に結び付けられるタイムラインです。 最もスクロール位置が始端の場合が進行度0%、最も終端の場合が進行度100%です。

スクロール進行タイムラインは animation-timelineで匿名的にscroll() 関数型記法で参照できますし、 scroll-timelineプロパティで宣言した後は名前で参照することもできます（§ 4.2 名前付きタイムラインのスコープと検索）。 Web Animations APIでは、匿名的にScrollTimelineオブジェクトで表現できます。

2.1. スクロール進行タイムラインの進行度計算

あるスクロール進行タイムラインの進行度（現在時刻）は次のように計算されます：スクロールオフセット ÷ (スクロール可能オーバーフローサイズ − スクロールコンテナサイズ)

0%位置と100%位置が一致する場合 （すなわち現在時刻の式の分母がゼロの場合）、 そのタイムラインは非アクティブとなります。

ページメディアでは、 ドキュメントビューポートを参照するスクロール進行タイムラインも 非アクティブとなります。

2.2. 匿名スクロール進行タイムライン

2.2.1. scroll()記法

scroll() 関数型記法は <single-animation-timeline>値として animation-timelineで使用でき、 スクロール進行タイムラインを指定します。 構文は以下の通りです。

<scroll()> = scroll( [ <scroller> || <axis> ]? )
<axis> = block | inline | x | y
<scroller> = root | nearest | self

デフォルトでは、scroll()は最も近い先祖のブロック軸の スクロールコンテナを参照します。 引数により以下のように参照先が変更できます：

block

ブロック軸上の スクロールコンテナの進行度を利用します。（デフォルト）

inline

インライン軸上の スクロールコンテナの進行度を利用します。

x

水平軸上の スクロールコンテナの進行度を利用します。

y

垂直軸上の スクロールコンテナの進行度を利用します。

nearest

最も近い先祖のスクロールコンテナを参照します。（デフォルト）

root

ドキュメントビューポートをスクロールコンテナとみなします。

self

要素自身の主ボックスを スクロールコンテナとみなします。 主ボックスがスクロールコンテナでない場合、 スクロール進行タイムラインは非アクティブとなります。

注: 進行度はスクロール原点を基準にしており、 書字モードによって反転する場合があります。 これはxや y指定時も同様です。

ルート要素への参照はドキュメントビューポートに伝播し、 （これはスクロールコンテナとして機能します）。

scroll()の各使用はWeb Animations API上で ScrollTimelineインスタンスに対応します。 複数要素が同じスクロールコンテナを同じ引数で参照していても、 それぞれ独立したインスタンスとなります。

2.2.2. ScrollTimeline インターフェース

enum ScrollAxis {
  "block",
  "inline",
  "x",
  "y"
};

dictionary ScrollTimelineOptions {
  Element? source;
  ScrollAxis axis = "block";
};

[Exposed=Window]
interface ScrollTimeline : AnimationTimeline {
  constructor(optional ScrollTimelineOptions options = {});
  readonly attribute Element? source;
  readonly attribute ScrollAxis axis;
};

ScrollTimelineは、AnimationTimelineの一種であり、スクロール進行タイムラインを表します。 Animationのコンストラクターやanimate()メソッドに渡すことで、アニメーションをスクロール進行タイムラインに関連付けることができます。

source、型 Element、読み取り専用、nullable

このタイムラインの進行を制御するスクロールコンテナ要素。

axis、型 ScrollAxis、読み取り専用

タイムラインの進行を制御するスクロールの軸。 上記の<axis>の値定義を参照。

継承属性：

currentTime （AnimationTimelineから継承）

スクロールコンテナのスクロール進行度（パーセンテージCSSUnitValue）を表します。 0%はスクロール位置の始端（スクロールコンテナの書字モード）を意味します。 タイムラインが非アクティブの場合はnullとなります。

通常0%はスクロールコンテナの初期スクロール位置を表しますが、 コンテンツ分布次第でそうならない場合もあります。 CSS Box Alignment 3 § 5.3 Overflow and Scroll Positions参照。これでよいでしょうか？

currentTime が負や100%以上になる場合の注記を追加してください。

ScrollTimeline(options)

以下の手順で新しいScrollTimeline オブジェクトを作成します：

1. timelineを新しいScrollTimeline オブジェクトとする。

2. timelineのsource を以下の値に設定する：

   もしoptionsのsourceメンバーが存在し、nullでなければ

   optionsのsourceメンバー。

   それ以外の場合

   そのDocument に関連付けられたscrollingElement （Window が現在のグローバルオブジェクトである場合）。

3. timelineのaxis プロパティを、optionsの該当値に設定する。

source が、主ボックスを持たないか、スクロールコンテナでない要素の場合、 またはスクロール可能オーバーフローがない場合、 ScrollTimeline は非アクティブとなります。

ScrollTimelineの duration は100%です。

source とcurrentTime の値は、いずれかが要求または更新されたときに計算されます。

2.3. 名前付きスクロール進行タイムライン

スクロール進行タイムラインは スクロールコンテナ自身に定義することもでき、 名前のスコープ内の要素から名前で参照できます （§ 4.2 名前付きタイムラインのスコープと検索参照）。

このような名前付きスクロール進行タイムラインは、 協調値リスト（scroll-timelineのロングハンド）で宣言されます。 これは協調リストプロパティ群を形成し、 scroll-timeline-nameを協調リスト基底プロパティにします。 CSS Values 4 § A Coordinating List-Valued Properties参照。

2.3.1. スクロール進行タイムラインの命名：scroll-timeline-nameプロパティ

この要素に関連付けられる名前付きスクロール進行タイムラインの名前を指定します。

2.3.2. スクロール進行タイムラインの軸：scroll-timeline-axisプロパティ

このスクロールコンテナで定義される名前付きスクロール進行タイムラインの軸を指定します。 このボックスがスクロールコンテナでない場合、 該当する名前付きスクロール進行タイムラインは非アクティブとなります。

値はscroll()の定義通りです。

2.3.3. スクロールタイムラインのショートハンド：scroll-timelineショートハンド

このプロパティはショートハンドで、scroll-timeline-nameとscroll-timeline-axisをまとめて設定します。

3. ビュー進行タイムライン

多くの場合、特定のボックス （ビュー進行対象） がスクロール進行タイムライン上で スクロールポート内に表示されている間に アニメーションを開始・終了したい場合があります。 ビュー進行タイムラインは、 そのボックスの主ボックスが最も近い先祖のスクロールポート （正確には該当するビュー進行可視範囲）と交差しているスクロール位置にスコープされた スクロール進行タイムラインの区間です。 その区間の始端スクロール位置が0%、終端スクロール位置が100%の進行度を表します。 § 3.2 ビュー進行タイムラインの進行度計算を参照してください。

注: 0%および100%のスクロール位置は常に到達可能とは限りません。 例えばボックスがスクロール可能オーバーフロー矩形の始端に配置されている場合、 32%未満の進行度までスクロールできないこともあります。

ビュー進行タイムラインは view() 関数型記法で匿名参照することも、 view-timelineプロパティで宣言した後に名前で参照することもできます （§ 4.2 名前付きタイムラインのスコープと検索参照）。 Web Animations APIでは、匿名的にViewTimeline オブジェクトで表現できます。

3.1. ビュー進行タイムラインの範囲

ビュー進行タイムラインは以下の名前付きタイムライン範囲を定義します：

cover

ビュー進行タイムラインの全範囲を表します：

• 進行度0%は、要素の開始ボーダーエッジが 主ボックスの、可視範囲の終端エッジと一致する最終位置を表します。

• 進行度100%は、要素の終端ボーダーエッジが 主ボックスの、可視範囲の開始エッジと一致する最初の位置を表します。

contain

主ボックスが 可視範囲内で完全に含まれるか、または完全に覆う間の範囲を表します。

• 進行度0%は、最初に次のいずれかが成立する位置を表します：

  • 要素の開始ボーダーエッジが 主ボックスの可視範囲の開始エッジと一致する場合。

  • 要素の終端ボーダーエッジが 主ボックスの可視範囲の終端エッジと一致する場合。

• 進行度100%は、以下いずれかが成立する最終位置：

  • 要素の開始ボーダーエッジが 主ボックスの可視範囲の開始エッジと一致する場合。

  • 要素の終端ボーダーエッジが 主ボックスの可視範囲の終端エッジと一致する場合。

entry

主ボックスが 可視範囲へ入る間の範囲を表します。

• 0%はcover範囲の0%と同義です。

• 100%はcontain範囲の0%と同義です。

exit

主ボックスが 可視範囲から出る間の範囲を表します。

• 0%はcontain範囲の100%と同義です。

• 100%はcover範囲の100%と同義です。

entry-crossing

主ボックスが 終端ボーダーエッジを 横切る間の範囲を表します。

• 進行度0%は、要素の開始ボーダーエッジが 主ボックスの可視範囲の終端エッジと一致する最終位置を表します。

• 進行度100%は、要素の終端ボーダーエッジが 主ボックスの可視範囲の終端エッジと一致する最初の位置を表します。

exit-crossing

主ボックスが 開始ボーダーエッジを 横切る間の範囲を表します。

• 進行度0%は、要素の開始ボーダーエッジが 主ボックスの可視範囲の開始エッジと一致する最終位置を表します。

• 進行度100%は、要素の終端ボーダーエッジが 主ボックスの可視範囲の開始エッジと一致する最初の位置を表します。

図を挿入してください。

いずれの場合も、書字モードは、開始・終端側を判定する際に関連するスクロールコンテナの書字モードを使用します。変形は無視されますが、 相対配置や絶対配置は考慮されます。

注: sticky配置ボックスの場合、0%・100%進行度の条件が単一のスクロール位置ではなく範囲で満たされることがあります。 それぞれの範囲は、最初または最後の該当位置を使うべきかを示します。

[CSS-POSITION-3] [CSS-TRANSFORMS-1]

3.2. ビュー進行タイムラインの進行度計算

現在時刻（進行度）は、ビュー進行タイムラインにおいて次の式で計算されます：distance ÷ range。ここで：

• distanceは、現在のスクロールオフセットから cover範囲の開始に対応するスクロールオフセットを引いた値

• rangeは スクロールオフセットの cover範囲の開始から cover範囲の終了に対応するスクロールオフセットを引いた値

0%位置と100%位置が一致する場合（つまり現在時刻式の分母がゼロの場合）、タイムラインは非アクティブとなります。

ページメディアでは、ドキュメントビューポートを参照するビュー進行タイムラインも非アクティブとなります。

3.3. 匿名ビュー進行タイムライン

3.3.1. view()記法

view() 関数型記法は <single-animation-timeline>値として animation-timelineで使用でき、 最も近い先祖のスクロールコンテナを参照する ビュー進行タイムラインを指定します。 構文は以下の通りです。

<view()> = view( [ <axis> || <'view-timeline-inset'> ]? )

デフォルトでは、view()はブロック軸を参照します。 scroll()同様、明示的な<axis>値を指定して変更できます。

オプションの<'view-timeline-inset'>値は、ビュー進行可視範囲の調整を行います。 詳細はview-timeline-insetを参照してください。

view()の各使用はWeb Animations API上で ViewTimelineインスタンスに対応します。 複数要素が同じ引数で同じ要素を参照していても、それぞれ独立したインスタンスとなります。

3.3.2. ViewTimeline インターフェース

dictionary ViewTimelineOptions {
  Element subject;
  ScrollAxis axis = "block";
  (DOMString or sequence<(CSSNumericValue or CSSKeywordValue)>) inset = "auto";
};

[Exposed=Window]
interface ViewTimeline : ScrollTimeline {
  constructor(optional ViewTimelineOptions options = {});
  readonly attribute Element subject;
  readonly attribute CSSNumericValue startOffset;
  readonly attribute CSSNumericValue endOffset;
};

ViewTimelineは、AnimationTimelineの一種であり、ビュー進行タイムラインを指定します。 Animationのコンストラクターやanimate()メソッドに渡すことで、アニメーションをビュー進行タイムラインに関連付けることができます。

subject, 型 Element, 読み取り専用

このタイムラインの進行を定義する主ボックスのスクロールポート(scrollport)内での可視性を持つ要素。

startOffset, 型 CSSNumericValue, 読み取り専用

ビュー進行タイムラインの開始（進行度0%）スクロール位置を px単位の長さオフセットとして スクロール原点から表します。 タイムラインが非アクティブの場合はnullとなります。

endOffset, 型 CSSNumericValue, 読み取り専用

ビュー進行タイムラインの終了（進行度100%）スクロール位置を px単位の長さオフセットとして スクロール原点から表します。 タイムラインが非アクティブの場合はnullとなります。

注: startOffset および endOffset の値はスクロール原点基準であり、 物理的な左上隅基準ではありません。 書字モードによっては、 スクロールコンテナの scrollLeft や scrollTop と一致しない場合があります。 例えば水平軸で右から左（rtl）書字モードの場合など。

継承属性：

source （ScrollTimelineから継承）

subjectの 最も近い先祖で、主ボックス(principal box)がスクロールコンテナ(scroll container)を確立する要素。 そのスクロール位置がタイムラインの進行を駆動します。

axis （ScrollTimelineから継承）

タイムラインの進行を駆動するスクロール軸を指定します。 上記<axis>参照。

currentTime （AnimationTimelineから継承）

ビュー進行タイムラインの現在進行度を パーセンテージCSSUnitValueで表します。 その位置でのスクロールコンテナのスクロール進行度です。 タイムラインが非アクティブの場合はnullとなります。

ViewTimeline(options)

以下の手順で新しいViewTimeline オブジェクトを作成します：

1. timelineを新しいViewTimeline オブジェクトとする。

2. timelineのsubject および axis プロパティを、optionsの該当値に設定する。

3. timelineのsource を、subjectの最も近い先祖の スクロールコンテナ要素に設定する。

4. もしinsetにDOMString値が与えられた場合は <'view-timeline-inset'>値としてパースする。 シーケンスが与えられた場合、最初の値が開始インセット、2番目の値が終了インセットとなる。 値が1つだけの場合は複製する。 0個または3個以上の場合、あるいは CSSKeywordValueに valueが"auto"以外の場合は TypeErrorを投げる。

   これらのインセットはViewTimelineの ビュー進行可視範囲を定義します。

source またはsubjectが 主ボックス(principal box)を持たない要素、 あるいは最も近い先祖のスクロールコンテナ にスクロール可能オーバーフローがない場合（またはそのような先祖自体が存在しない場合、例：印刷メディア）、 ViewTimeline は非アクティブとなります。

subject、 source、 currentTime はいずれかが要求または更新されたときに計算されます。

3.4. 名前付きビュー進行タイムライン

ビュー進行タイムラインは 宣言的にも定義でき、名前のスコープ内の要素から名前で参照できます （§ 4.2 名前付きタイムラインのスコープと検索参照）。

このような名前付きビュー進行タイムラインは、 協調値リスト（view-timeline-*プロパティ）で宣言されます。 これは協調リストプロパティ群を形成し、 view-timeline-nameを協調リスト基底プロパティにします。 CSS Values 4 § A Coordinating List-Valued Properties参照。

3.4.1. ビュー進行タイムラインの命名：view-timeline-name プロパティ

この要素に関連付けられる名前付きビュー進行タイムラインの名前を指定します。

3.4.2. ビュー進行タイムラインの軸：view-timeline-axis プロパティ

この要素の主ボックス(principal box)に由来する名前付きビュー進行タイムラインの軸を指定します。

値はview()の定義通りです。

3.4.3. ビュー進行タイムラインのインセット：view-timeline-insetプロパティ

該当するスクロールポートの 境界判定時に、ボックスが表示範囲内かどうか決定する際のインセット（正値）やアウトセット（負値）調整を指定します。 最初の値は該当軸の開始インセットを、 2番目の値は終了インセットを表します。 2番目の値が省略された場合、最初の値が使われます。 この結果、スクロールポートの範囲が ビュー進行可視範囲となります。

auto

scroll-paddingの値を利用します。

<length-percentage>

scroll-padding同様に、スクロールポート対応エッジから内側へのオフセットを定義します。

3.4.4. ビュータイムラインのショートハンド：view-timeline ショートハンド

このプロパティはショートハンドであり、view-timeline-nameとview-timeline-axisを一度に設定します。 view-timeline-insetは設定しません。

view-timeline-insetもリセットするべきでしょうか？

4. スクロール駆動タイムラインへのアニメーションの付与

アニメーションはスクロール駆動タイムラインに、CSSの場合はscroll-timelineプロパティ、 Web Animations APIの場合はAnimationTimeline パラメータで付与できます。 アニメーションのアクティブ区間を さらに特定のタイムライン範囲に制限することも可能です （タイムライン範囲へのアニメーション付与参照）。

時間ベースのディレイ（animation-delay） はスクロール駆動アニメーションには適用されません。 スクロール駆動アニメーションは距離ベースです。

4.1. 有限タイムライン計算

時間駆動タイムラインと異なり、スクロール駆動タイムラインは有限であり、 スクロール駆動アニメーションは常に有限の付与範囲に付与されます（animation-rangeによってさらに制限される場合あり。付録A: タイムライン範囲参照）。 アニメーションの

注: アニメーションが無限のiteration countの場合、 各繰り返しdurationおよび結果としてのアクティブdurationはゼロになります。

アニメーション内に絶対位置指定キーフレーム （タイムライン上の特定地点に固定されたもの、例：名前付きタイムライン範囲キーフレームセレクターを@keyframesで使用） が含まれる場合、これらのキーフレーム位置を0%・100%に対して相対的に算出する際は iteration countを1とみなします。 その後、アニメーション全体を繰り返しdurationに合わせてスケーリングし、繰り返し毎に繰り返します。

注: 絶対位置キーフレームと繰り返し回数>1の組み合わせでどのようなユースケースがあるかは不明です。 この仕様では少なくとも定義済みの挙動となります。 （代替案としては、絶対位置キーフレームを「flow外」として残りのキーフレームを繰り返す、なども考えられるが不自然かもしれません。） 編集者はこのケースの現実的なユースケースがあれば知りたいです。

4.2. 名前付きタイムラインのスコープと検索

名前付きスクロール進行タイムラインやビュー進行タイムラインは 以下から参照できます：

• 名前宣言要素自身

• その要素の子孫

注: timeline-scopeプロパティを使うことで、 祖先要素にタイムライン名を宣言し、そのスコープをその要素のサブツリーより広げることもできます。

複数要素が同じタイムライン名を宣言している場合、該当タイムラインはツリー順で最も近い要素で宣言されたものになります。 同一要素上で名前が競合した場合、命名プロパティ （scroll-timeline-name、view-timeline-name）で後に宣言された名前が優先され、 スクロール進行タイムラインがビュー進行タイムラインよりも優先されます。

<style>
  @keyframes anim {
    from { color: red; }
    to { color: green; }
  }

  .root {
    /* 'scroller'タイムラインのスコープを全子孫に拡張 */
    timeline-scope: scroller;
  }

  .root .animation {
    animation: anim;
    /* 'scroller'タイムラインを参照し、'anim'の進行を駆動 */
    animation-timeline: scroller;
  }

  .root .animation + .scroller {
    /* 'scroller'タイムライン名にスクロール進行タイムラインを付与 */
    scroll-timeline: scroller;
  }
</style>
&hellip;
<section class="root">
  <div class="animation">Animating Box</div>
  <div class="scroller">Scrollable Box</div>
</section>

4.3. アニメーションイベント

スクロール駆動アニメーションは、 Web Animations § 4.4.18 アニメーションイベント、 CSS Animations 1 § 4 アニメーションイベント、 およびCSS Animations 2 § 4.1 イベント発火で記述されている、 通常の時間駆動アニメーションと同じアニメーションイベントをすべて発火します。

注: スクロールを逆方向にした場合、 animationstartイベントはアクティブ区間の終端で発火し、 animationendイベントはアクティブ区間の始端で発火します。 ただし、finishイベントは終了プレイ状態へ入ることが条件なので、 順方向スクロール時のみ発火します。

5. フレーム計算詳細

5.1. HTML処理モデル：イベントループ

スクロールによってアニメーション進行を駆動できることは、 スクロールオフセットの変更がアニメーションの効果を更新し、 その結果さらにスクロールオフセットが変更されるというレイアウトサイクルの可能性を生じさせます。

このようなレイアウトサイクルを防ぐため、 スクロール進行タイムラインを持つアニメーションは、 HTML処理モデルのイベントループのステップ7.10で、 アニメーション更新とイベント発火のステップ1として現在時刻を一度だけ更新します。

ステップ7.14.1では、 作成されたスクロール進行タイムラインやビュー進行タイムラインが 古いタイムライン集合にまとめられます。 ステップ7.14後、タイムラインの名前付きタイムライン範囲が変更されていれば、 これらのタイムラインは古いタイムライン集合に追加されます。 古いタイムラインがあれば、現在時刻と関連範囲を更新し、 古いタイムライン集合はクリアされ、 スタイル再計算とレイアウト更新の追加ステップが実行されます。

注: プログラムでサイズ変更される要素を考慮するため、 ResizeObserver の発火後にレイアウト変更をチェックします。

注: 古いタイムラインは最初のスタイルとレイアウト計算時のみ集計されるため、 直接的に追加のスタイル再計算が1回だけ発生します。 他のAPIが追加更新を必要とする場合も同じステップ内でチェックし、同時に更新してください。

注: この追加のスタイル・レイアウト更新がなければ、 初期古いタイムラインはそのフレーム中ずっと古いままとなり （つまり現在時刻を持たない）、 そのタイムラインにリンクされたアニメーションはそのフレームで効果値を出力しないため、 レンダリングで初期の「フラッシュ」が生じる可能性があります。

注: このセクションは getComputedStyle() などによる強制スタイル・レイアウト計算には影響しません。 つまり、初期古いタイムラインはそのままAPIから見えます。

最終的なスタイル・レイアウト更新が timeline-scope（スコープ参照）や スクロール進行タイムライン、 ビュー進行タイムラインの 時刻またはスコープに変化をもたらす場合、 それらは次回レンダリング更新時まで再サンプリングされません。

このセクションのどの記述も、スクロールがレイアウトやスクリプトをブロックすることを要求するものではありません。 ユーザーエージェントが通常、スクロールが発生したもののレイアウトやスクリプトの影響が完全に反映されていないフレームを合成する場合 （例：scrollイベントリスナーがまだ実行されていない場合）、 スクロール駆動アニメーションのサンプリングも、その合成フレームでは行わない選択ができます。 その場合、描画されたスクロールオフセットとスクロール駆動アニメーションの状態は合成フレーム内で不一致となることがあります。

6. プライバシーの考慮事項

本仕様の機能に関して既知のプライバシーへの影響はありません。

7. セキュリティの考慮事項

本仕様の機能に関して既知のセキュリティへの影響はありません。

付録A: タイムライン範囲

このセクションはCSS-ANIMATIONS-2およびWEB-ANIMATIONS-2に移すべきです。

この付録では名前付きタイムライン範囲とアニメーション付与範囲の概念を CSS Animationsおよび Web Animationsに導入します。

名前付きタイムライン範囲

名前付きタイムライン範囲は、 アニメーションタイムラインの名前付き区間です。 区間の開始はその範囲を0%進行度で表し、 区間の終端は100%進行度で表します。 1つのタイムラインには複数の名前付きタイムライン範囲が関連付けられる場合があり、 これらの範囲が重複することもあります。 例えば、ビュー進行タイムラインのcontain範囲は cover範囲と重複します。 名前付きタイムライン範囲は、 <timeline-range-name>値型で表され、 これは定義済みの名前付きタイムライン範囲のいずれかを表すCSS識別子です。

注: 本仕様では、名前付きタイムライン範囲は [SCROLL-ANIMATIONS-1]などの仕様で定義されている必要があります。 将来的なレベルでは、著者が独自の名前付きタイムライン範囲を宣言できるAPIが導入される可能性があります。

名前付きタイムライン範囲キーフレームセレクター

名前付きタイムライン範囲の名称とパーセンテージは、 名前付きタイムライン範囲内の特定進行度へキーフレームを付与するために利用できます。 CSSの@keyframes規則は次のように拡張されます：

<keyframe-selector> = from | to | <percentage [0,100]> | <timeline-range-name> <percentage>

ここで<timeline-range-name>は 選択した定義済み名前付きタイムライン範囲を表すCSS識別子であり、 その後ろの<percentage>はその名前付きタイムライン範囲の開始～終了間の進行度割合を表します。

キーフレームは指定したタイムラインの位置に付与されます。 タイムラインに該当する名前付きタイムライン範囲がない場合、 その名前付きタイムライン範囲上のキーフレームは無視されます。 この付与点がアニメーションのアクティブ区間外の場合もあり、 その場合は自動生成のfrom（0%）およびto（100%）キーフレームは、 そのプロパティに0%以前または100%以上のキーフレームがなければ生成されます。

タイムライン範囲へのアニメーション付与

一連のアニメーションキーフレームは アニメーション付与範囲に基づいて付与でき、 アニメーションのアクティブ区間を そのタイムライン範囲に制限できます（animation-rangeプロパティ）。 ディレイ（animation-delay参照）はこの制限範囲内で設定されるため、 autodurationや 無限繰り返しの利用可能時間がさらに減少します。

注: animation-rangeは 付与範囲を広げることも絞ることもできます。

付与範囲外に配置されたフレームは必要に応じて補間に使われますが、 アクティブ区間外なのでアニメーション本体からは除外され、 実質的にアニメーションは付与範囲の末尾で切り捨てられます。

range start┐             ╺┉┉active interval┉┉╸           ┌range end
┄┄┄┄┄┄┄┄┄┄┄├─────────────╊━━━━━━━━━━━━━━━━━━━╉───────────┤┄┄┄┄┄┄┄┄
           ╶┄start delay┄╴                   ╶┄end delay┄╴
                         ╶┄┄┄┄┄ duration┄┄┄┄┄╴

animation-rangeプロパティは、 リセット専用サブプロパティであり、 animationのショートハンドです。

時間駆動アニメーションへの適用も定義すること。

アニメーションのタイムライン範囲指定：animation-rangeショートハンド

animation-rangeプロパティは、 ショートハンドであり、 animation-range-startと animation-range-endを一括設定し、 アニメーションを指定したアニメーション付与範囲に関連付けます。

もし<'animation-range-end'>が省略され、 <'animation-range-start'>に <timeline-range-name>成分が含まれている場合、 animation-range-endは 同じ<timeline-range-name>と100%に設定されます。 それ以外で省略されたロングハンドは初期値となります。

animation-range: entry 10% exit 90%;
animation-range-start: entry 10%;
animation-range-end: exit 90%;

animation-range: entry;
animation-range-start: entry 0%;
animation-range-end: entry 100%;

animation-range: entry exit;
animation-range-start: entry 0%;
animation-range-end: exit 100%;

animation-range: 10%;
animation-range-start: 10%;
animation-range-end: normal;

animation-range: 10% 90%;
animation-range-start: 10%;
animation-range-end: 90%;

animation-range: entry 10% exit;
animation-range-start: entry 10%;
animation-range-end: exit 100%;

animation-range: 10% exit 90%;
animation-range-start: 10%;
animation-range-end: exit 90%;

animation-range: entry 10% 90%;
animation-range-start: entry 10%;
animation-range-end: 90%;

ここで省略値の扱いはどうするのが最適か？ [Issue #8438]

アニメーションのタイムライン範囲開始指定：animation-range-startプロパティ

アニメーションの付与範囲の開始位置を指定し、 アニメーションの開始時刻（すなわち繰り返し回数1の時に0%進行度にマッピングされるキーフレームの付与位置）をずらします。

値の意味は以下の通りです：

normal

アニメーションの付与範囲開始は関連タイムラインの開始となり、 アニメーションのアクティブ区間は通常通り決定されます。

<length-percentage>

アニメーション付与範囲は タイムラインの開始から指定位置で開始します。

<timeline-range-name> <length-percentage>?

アニメーション付与範囲は 指定された名前付きタイムライン範囲の開始から指定位置で開始します。 <length-percentage>が省略された場合は0%となります。

アニメーションのタイムライン範囲終了指定：animation-range-endプロパティ

アニメーションの付与範囲の終了位置を指定し、 アニメーションの終了時刻（すなわち繰り返し回数1の時に100%進行度にマッピングされるキーフレームの付与位置）をずらす・ またはアニメーションのアクティブ区間を切り詰めます。

値の意味は以下の通りです：

normal

アニメーションの付与範囲の終了は関連タイムラインの終端となり、 アニメーションのアクティブ区間は通常通り決定されます。

<length-percentage>

アニメーション付与範囲は タイムラインの開始から指定位置で終了します。

<timeline-range-name> <length-percentage>?

アニメーション付与範囲は 指定された名前付きタイムライン範囲の開始から指定位置で終了します。 <length-percentage>が省略された場合は100%となります。

タイムライン範囲進行度の取得：getCurrentTime()メソッド

名前付き範囲の進行度は、AnimationTimeline オブジェクト上のgetCurrentTime() メソッドで公開されます：

dictionary AnimationTimeOptions {
  DOMString? range;
};

[Exposed=Window]
partial interface AnimationTimeline {
  CSSNumericValue? getCurrentTime(optional AnimationTimeOptions options = {});
};

このメソッドはcurrentTimeと関係しますが同一ではありません。名称を変えるべき？ [Issue #8201]

このメソッドはrange名指定時、ScrollTimelineの範囲に対してパーセンテージを返します。 時間ベースタイムラインの場合、range名指定時はその範囲のパーセンテージ進行度、または時間進行度を返すべき？

付録B: タイムライン名スコープ

このセクションはCSS-ANIMATIONS-2に移すべきです。

この付録では、祖先要素でタイムライン名のスコープを宣言できるtimeline-scopeプロパティを紹介します。

名前付きタイムラインのスコープ宣言：timeline-scopeプロパティ

このプロパティは指定されたタイムライン名のスコープをこの要素のサブツリー全体に拡張します。 これにより、名前付きタイムライン （名前付きスクロール進行タイムラインや名前付きビュー進行タイムラインなど）が タイムライン定義要素のサブツリー外（兄弟・従兄弟・祖先など）からも参照可能になります。 また、指定名の子孫タイムラインはこのサブツリー外から参照できなくなり、 祖先タイムラインはこのサブツリー内から参照できなくなります。

この遮断効果について議論中です。 [Issue #8915]

値の意味は以下の通りです：

none

タイムライン名のスコープに変更なし。

<dashed-ident>

子孫で定義された一致する名前付きタイムライン（その子孫が明示的にtimeline-scopeを宣言していない場合）をこの要素と全子孫でスコープ内とする。

該当タイムラインが存在しない、または複数存在する場合は、その名前の非アクティブタイムラインを宣言する。

注: このプロパティは、同じ名前を宣言した子孫要素のサブツリー内のタイムライン名検索には影響しません。 名前付きタイムラインのスコープ宣言：timeline-scopeプロパティ参照。

8. 変更点

前回（2023年4月28日）の作業草案からの変更点：

• scroll-timeline-attachmentおよびview-timeline-attachmentを削除し、代わりにtimeline-scopeを採用しました。 （Issue 7759）

• 名前付きタイムラインにおいて、標準CSSキーワードとの名前衝突を防ぐため、 <dashed-ident>を <custom-ident>の代わりに使用するよう変更しました。 （Issue 8746）

また、以前の変更点も参照してください。