Web Animations モジュール レベル 2

1. 差分仕様

これは差分仕様（デルタ仕様）であり、現在はWeb Animations Level 1 [WEB-ANIMATIONS-1] との差分のみを記載しています。 Level 1の仕様が完成に近付いた際には、本書の追加事項と統合され、Level 2の完全な仕様となる予定です。

2. タイミングモデル

このセクションでは、Web Animationsのタイミングモデルの挙動を説明・定義します。

2.1. タイミングモデルの概要

このセクションは規範的ではありません

2.1.1. 階層構造

本仕様レベルでは更新されたタイミング階層図が含まれています。

また、以下の更新済み説明も付随します：

このような階層構造の結果として、複雑なアニメーション全体を単一の単位として逆再生したり、スケジューリング、加速などの操作が可能となります。これは、親ノードへの操作がその子孫ノードへカスケード的に反映されるためです。 さらに、全ての時刻が共通の基準から導かれるため、アニメーションの同期も容易です。

2.2. タイムライン

追加：

タイムラインのdurationは、そのタイムラインで生成可能な現在時刻の最大値を表します。この値は、アニメーションの対象エフェクトの固有反復時間を計算するのに使われます。特に効果のiteration durationが"auto"の場合は、対象のタイムラインと連動します。値は効果が利用可能な時間を埋めるように計算されます。単調増加なタイムラインの場合、現在時刻には上限がなく、タイムラインdurationは未解決となります。非単調（例：スクロール）タイムラインの場合、durationには固定上限があります。この場合、そのタイムラインは進捗ベースのタイムラインとなり、そのタイムラインdurationは100%となります。

2.3. アニメーションフレーム

アルゴリズムの最初のステップの注記に、次の項目を追加：

• アニメーショントリガーの状態を、アニメーショントリガーに対してアニメーショントリガー状態の更新手続きを実行することで更新します。

2.4. アニメーション

追記：

進捗ベースのタイムラインに関連付けられたアニメーションエフェクトは、タイミング特性を割合（比率）に変換する必要があります。への変換手順は以下の通り：

1. iteration durationがautoの場合、次のステップを行います。

   • start delayとend delayを0に設定します。これは、時間と割合を混在させることができないためです。

     注記： 将来のバージョンではこれらプロパティがパーセントで指定できるようになる可能性があり、その場合、値が時間の場合のみ無視されることになります。

   それ以外の場合：

   1. total timeをend timeとする。

   2. start delayをspecified start delay / total time * timeline durationで評価した結果に設定する。

   3. iteration durationをspecified iteration duration / total time * timeline durationで評価した結果に設定する。

   4. end delayをspecified end delay / total time * timeline durationで評価した結果に設定する。

指定タイミングの正規化手順は以下の通り：

timeline durationが解決済みの場合：

• 時間ベースのアニメーションから割合ベースのアニメーションへの変換手順に従う

それ以外の場合：

1. start delay = specified start delay

2. end delay = specified end delay

3. iteration durationがautoの場合：

   • iteration duration = 固有反復時間

   それ以外の場合：

   • iteration duration = specified iteration duration

2.4.1. アニメーションのタイムライン設定

アニメーションのタイムラインを設定（animationをnew timeline（null可）へ設定）の手順は以下の通り：

1. old timelineを、animationの現在のtimeline（存在すれば）とする。

2. もしnew timelineがold timelineと同一オブジェクトなら、この手順を中止する。

3. previous play stateをanimationの再生状態とする。

4. previous current timeをanimationの現在時刻とする。

5. previous progressを次の最初に該当する条件に基づいて設定：

   もしprevious current timeが未解決であれば:

   previous progressを未解決に設定する。

   もしend timeが0であれば:

   previous progressを0に設定する。

   それ以外の場合

   previous progress = previous current time / end time

6. from finite timelineをold timelineがnullではなく、かつ単調増加タイムラインでない場合trueとする。

7. to finite timelineをtimelineがnullでなく、かつ単調増加タイムラインでない場合trueとする。

8. animationのtimelineをnew timelineに設定する。

9. 次のうち最初に一致する条件に対し該当するステップを実行：

   もしto finite timelineなら、

   1. 保留中再生レートの適用をanimationに対して行う

   2. auto align start time を true に設定する。

   3. start time を未解決に設定する。

   4. hold time を未解決に設定する。

   5. もしprevious play stateが"finished"または"running"であれば

      1. pending play taskをスケジューリングする

   6. もしprevious play stateが"paused"で、かつprevious progressが解決済みの場合：

      1. hold time を previous progress * end time に設定する。

   この手順により、previous progressはpause-pending かつ開始時刻が解決済みな場合でも維持されます。

   もしfrom finite timelineであり、かつprevious progressが解決済みの場合、

   現在時刻の設定手順を、previous progress * end time で実行する。

10. もしanimationのstart timeが未解決であれば、animationのhold timeを未解決にする。

    このステップは、finished play stateが“sticky”にならず、更新後の現在時刻に基づき再評価されることを保証します。

11. アニメーションの終了状態の更新手順を、did seekフラグfalse、synchronously notifyフラグfalseで実行する。

2.4.2. アニメーションのターゲットエフェクト設定

pending play taskを再スケジューリングする手順の後に、次のステップを追加：

1. もしnew effectがnullでなく、かつnew effectに親グループがあるなら、removeでnew effectをその親グループから外す。

2.4.3. 関連エフェクトの待機

以下に置き換え：

アニメーションは、次の両方の条件が成立した最初の瞬間にreadyになる：

• ユーザーエージェントがアニメーションの関連エフェクトの再生開始に必要な設定（キーフレームエフェクトの最初のフレームの描画など）を完了している。

• アニメーションがtimelineに関連付けられていて、そのタイムラインがinactiveでない。

次で置き換え：

アニメーションは、次のすべての条件が成立した最初の瞬間にreadyになる：

• ユーザーエージェントがアニメーションの包括的な子孫ごとに、再生の準備に必要な設定（キーフレームエフェクトの最初のフレーム描画や、カスタムエフェクトの実行等）を完了している。

• アニメーションが、timelineに関連付けられていて、そのタイムラインがinactiveでない。

• アニメーションのhold timeまたはstart timeが解決済み。

注: アニメーションは、ready ではありません。まだ 開始時刻 または 停止時刻 がない場合です。 スクロール駆動アニメーションについては、auto align start time が true の場合、 タイムラインを更新するときに開始時刻が決定されます。

2.4.4. CSSNumberish time の検証

CSSNumberish time を検証する手順は、入力値timeに対し最初に一致する条件に基づいて行います：

以下の条件がすべて満たされる場合：

• アニメーションが進捗ベースのタイムラインに関連付けられている

• time がパーセント単位の CSSNumeric 値でない

TypeError を throw する。

false を返す;

以下の条件がすべて満たされる場合：

• アニメーションが進捗ベースのタイムラインに関連付けられていない

• time が CSSNumericValue である

• time の単位が duration unit でない

TypeError を throw する。

false を返す。

それ以外の場合

true を返す。

2.4.5. Animation の現在時刻を設定する

アニメーションのcurrent timeは新しい値に設定でき、アニメーションをシークさせることができます。 現在時刻の設定手順は2つの部分に分かれて定義されています。

現在時刻を静かに設定する手順（アニメーションanimationの現在時刻をseek timeに設定）は次の通りです：

1. もしseek timeが未解決時刻値であれば、次を行う：

   1. もしcurrent timeが解決済みなら TypeError を throw する。

   2. この後の手順を中止する。

2. valid seek time を、CSSNumberish time を検証手順でseek timeを入力として実行した結果とする。

3. もしvalid seek timeが false なら、この手順を中止する。

4. auto align start time を false に設定する。

5. 次の通りanimationのhold timeまたは start time を更新する：

   いずれかの条件が true の場合：

   • animationのhold timeが解決済みである、または

   • animationのstart time が未解決である、または

   • animationに関連タイムラインが無いか、そのtimelineがinactive、または

   • animationのplayback rateが0

   1. animationのhold timeをseek timeに設定する。

   それ以外の場合

   animationのstart timeを timeline time - (seek time / playback rate) で評価した結果に設定する。ただしtimeline timeはanimationに紐づくtimelineの現在time valueとする。

6. もしanimationに関連するtimeline が無いか、または関連 timeline がinactiveなら animationのstart timeを未解決にする。

   これにより、アクティブなタイムラインが無い場合、start timeかcurrent timeのいずれかしか設定できないという不変条件が維持されます。

7. animationのprevious current timeを未解決にする。

現在時刻を設定する手順（アニメーションanimationの現在時刻をseek timeに設定）は次の通りです：

1. 現在時刻を静かに設定手順をanimationとseek timeで実行する。

2. もしanimationがpending pause taskを持つ場合、pause操作を次のステップですぐに完了する：

   1. animationのhold timeをseek timeに設定する。

   2. 保留中再生レートを適用する。

   3. animationのstart timeを未解決にする。

   4. pending pause taskをキャンセルする。

   5. resolve でanimationの current ready promiseをanimationで解決する。

3. アニメーションの終了状態の更新手順を animationに対してdid seekフラグtrue,synchronously notifyフラグfalseで実行する。

2.4.6. Animation の開始時刻を設定する

開始時刻を設定 手順（animation animation の開始時刻を new start time に設定）は以下の通り：

1. valid start time を、CSSNumberish time を検証手順で new start time を入力として実行した結果とする。

2. もし valid start time が false なら、この手順を中止する。

3. auto align start time を false に設定する。

4. timeline time を、animationに関連付けられた timeline の現在の time value とする。 animation に関連付けられたtimelineが 存在しないか、関連タイムラインがinactiveの場合は、 timeline timeを未解決とする。

5. もしtimeline timeが未解決かつnew start timeが解決済みなら、 animationのhold timeを未解決にする。

   これにより、アクティブなタイムラインが存在しない場合、start timeか current timeのいずれかしか設定できないという不変条件が維持されます。

6. previous current time を animation の current time とする。

   注記： これは、前ステップによりcurrent timeが 未解決になることもあるので、変更後の値となる。

7. 保留中再生レートを適用する。

8. animation の start time を new start time に設定する。

9. animation の hold time を次の条件分岐で更新する：

   もし new start time が解決済みの場合

   もし animation のplayback rate が0でないなら animation のhold timeを未解決にする。

   それ以外の場合 (new start time が未解決)

   1. animationのhold timeをprevious current timeに（それが未解決でも）設定する。

10. もし animation が pending play task か pending pause task を持っていれば、それらをキャンセルし、 resolve で animation の current ready promise を animation で解決する。

11. アニメーションの終了状態の更新手順を animation に対して did seek フラグ true, synchronously notify フラグ false で実行する。

2.4.7. アニメーションの再生

アニメーションを再生する手順（animation、およびフラグauto-rewindを与える）は次の通り：

注記：auto-rewindフラグは、このモデルを基に構築されているが巻き戻し動作を必要としない他仕様、たとえばCSS Animations [CSS-ANIMATIONS-1]向けに用意されています。

1. aborted pause を、animationがpending pause taskを持つ場合にtrue、そうでなければfalseとなる論理値とする。

2. has pending ready promise を初期値falseの論理値フラグとする。

3. has finite timeline を、animationが関連付けられたtimelineを持ち、かつそれが単調増加でない場合にtrueとする。

4. previous current time を animation の current time とする。

5. enable seek を、auto-rewindフラグがtrueでかつhas finite timelineがfalseのときtrue、さもなければfalseとする。

6. 次のうち最初に該当する条件に従って手順を実行：

   もし animation のeffective playback rate > 0 かつ enable seek が true かつ、さらにいずれかの条件が成り立つ場合：

   • previous current time が未解決である、または

   • previous current time < 0、または

   • previous current time ≥ associated effect end

   animation の hold time を 0 に設定する。

   もし animation の effective playback rate < 0 かつ enable seek が true かつ、さらにいずれかの条件が成り立つ場合：

   • previous current time が未解決である、または

   • previous current time ≤ 0 、または

   • previous current time > associated effect end

   もし associated effect end が正の無限大の場合

   InvalidStateError DOMException をスローし、この手順を中止する。

   それ以外の場合

   animation の hold time を animation の associated effect end にする。

   もし animation のeffective playback rate = 0 かつ animation の current time が未解決の場合

   animation の hold time を 0 に設定する。

7. もし has finite timeline が true かつ previous current time が未解決の場合：

   • フラグ auto align start time を true に設定する。

   注記： CSSアニメーションでスタイル更新中にplayが呼ばれた場合、animation のstart timeはレイアウト後でないと確定できません（開始時刻はアニメーション範囲の先頭または末尾（playback rateに依存）に揃える必要があるため）。 この場合、アニメーションは開始時刻自動調整状態とされ、進行度をアニメーション範囲に合わせるように自動的に開始時刻が調整されます。

8. もし animation の hold time が解決済みの場合、 start time を未解決にする。

9. もし animation がpending play taskまたは pending pause taskを持つ場合

   1. そのタスクをキャンセルする。

   2. has pending ready promise を true に設定する。

10. 以下の3条件が全て満たされる場合：

    • animation の hold time が未解決である

    • aborted pause が false である

    • animationがpending playback rateを持たない

    この手順を中止する。

11. もし has pending ready promise が false なら animationのcurrent ready promiseをanimationのrelevant Realmで新しいpromiseとする。

12. animationがreadyになったらすぐ実行するタスクをスケジュールする。 タスクは以下のステップを実行する：

    1. animationのstart timeか hold timeのいずれかが解決済みであることをアサートする。

    2. ready timeを、animationに関連するtimelineが animationがready状態になった瞬間のtime valueとする。

    3. 次のいずれかに該当する場合、該当する条件ごとにステップを実行：

       もし animation のhold time が解決済みなら

       1. 保留中再生レートの適用をanimationに行う。

       2. new start timeを ready time - hold time / playback rate で計算する（ただし再生レート0の場合はnew start time=ready time）。

       3. animation のstart time をnew start timeに設定する。

       4. 再生レートが0でなければ、animationのhold timeを未解決にする。

       もし animation のstart timeが解決済み、かつ animationがpending playback rateを持つ場合

       1. current time to match を (ready time - start time) × playback rate で計算する。

       2. 保留中再生レートの適用をanimationに行う。

       3. 再生レート0の場合はhold timeをcurrent time to matchに設定する。

       4. new start time を ready time - current time to match / playback rate で計算する（再生レート0の場合はready time）。

       5. animationのstart timeをnew start timeに設定する。

    4. resolveでanimationのcurrent ready promiseをanimationで解決する。

    5. アニメーションの終了状態の更新手順を did seekフラグfalse, synchronously notifyフラグfalseで実行する。

       上記2つの手順の順序が重要です。これにより、長さゼロの関連エフェクトを持つアニメーションはcurrent ready promiseをcurrent finished promiseより前に解決します。

    上記タスクがスケジュール済みでまだ実行されていない間、animationは pending play taskを持つとみなします。 なおそのタスク実行中は、animationはpending play taskを持ちません。

    ユーザーエージェントがanimationが即座にreadyであると判断した場合、上記タスクは マイクロタスクのチェックポイント で実行されるマイクロタスクとしてスケジュールしてよいが、同期的には実行してはならない。

    上記要件は、次のようなコードがすべての実装で一貫した動作となることを保証します：

    animation.play();
    animation.ready.then(
      () => { console.log('Playback commenced'); },
      () => { console.log('Playback was canceled'); }
    );
    // Suppose some condition requires playback to be canceled...
    animation.cancel();
    // "Playback was canceled" will be printed to the console.
    

    もしpending play taskが同期的に実行されていれば、 current ready promiseはrejectされません。

13. アニメーションの終了状態の更新手順を did seekフラグfalse, synchronously notifyフラグfalseで実行する。

アニメーションを再生手順には、カスタムエフェクトの更新タスクをスケジューリングする処理も含める必要がある。

2.4.7.1. 開始時刻の自動調整

非単調タイムラインにアタッチされている場合、アニメーションの開始時刻はレイアウト依存となりうる。この場合、タイムラインがレイアウト後に更新されてから開始時刻の計算を行う。タイムラインの現在時刻が更新される時、関連付けられているアニメーションすべてのstart timeが条件に応じて更新される。 開始時刻自動調整の手順は以下の通り：

1. もしauto-align start timeフラグがfalseなら、この手順を中止する。

2. タイムラインがinactiveなら、この手順を中止する。

3. play stateがidleなら、この手順を中止する。

4. play stateがpausedかつhold timeが解決済みなら、この手順を中止する。

5. start offset をアニメーションattachment範囲の開始に対応する解決済みタイムライン時刻とする。 view timeline の場合、この計算はカバー範囲の比率に基づく。

6. end offset をアニメーションattachment範囲の終了に対応する解決済みタイムライン時刻とする。 view timeline の場合、この計算はカバー範囲の比率に基づく。

7. start timeを effective playback rateが0以上ならstart offset、 それ以外はend offsetに設定する。

8. hold timeをクリアする。

2.4.8. アニメーションの一時停止

アニメーションを一時停止する手順は、 関連エフェクトだけでなく、その関連エフェクトのすべての子孫にも参照する必要があります。

seek time の設定に関する制約は単調タイムライン使用時のみに適用されるように更新してください。 スクロール駆動アニメーション では、アニメーション範囲が計算されるまで hold time の設定を遅延する必要があります。

次の記述を置き換え：

1. seek time を 最初はtime valueの 未解決状態とする。

2. has finite timeline を true とするのは、animation に関連付けられた タイムライン が 単調増加 でない場合である。

3. animation の current time が 未解決の場合、次のうち最初に該当する条件で手順を実行する：

   もしanimationのplayback rateが0以上なら

   seek time を 0 にする。

   それ以外の場合

   もし associated effect end が正の無限大なら

   InvalidStateError DOMException をthrowしこの手順を中止する。

   それ以外の場合

   seek time を animation の associated effect end にする。

4. seek time が 解決済みなら

   もし has finite timeline がtrueなら

   animation の start time を seek time に設定する。

   それ以外の場合

   animation の hold time を seek time に設定する。

次で置き換え：

1. has finite timeline を true とするのは、animation に関連付けられた タイムライン が 単調増加 でない場合である。

2. もし animation の 現在時刻 が 未解決 であり、かつ has finite timeline が false の場合、下記の最初に当てはまる条件に従って処理を行う：

   もし animation の 再生レート が 0 以上の場合

   停止時刻 をゼロに設定する。

   それ以外の場合

   もし 関連エフェクトの終点 が animation に対して正の無限大である場合

   "throw" "InvalidStateError" DOMException を送出して、これらの手続きを中止する。

   それ以外の場合

   停止時刻 を animation の 関連エフェクトの終点 に設定する。

3. もし has finite timeline が true かつ animation の 現在時刻 が 未解決 の場合

   • auto align start time フラグを true に設定する。

次の記述を置き換え：

次の2つの条件がともに成立した最初の瞬間にタスクをスケジュールする：

• ユーザーエージェントが（もしあれば）アニメーションの関連エフェクト再生停止に必要な処理を完了していること。

• アニメーションが非 inactive なタイムラインに関連付けられていること。

次で置き換え：

次のすべての条件が成立した最初の瞬間にタスクをスケジュールする：

• ユーザーエージェントが（あれば）アニメーションの関連エフェクト再生停止に必要な処理を完了していること。

• アニメーションが非 inactive なタイムラインに関連付けられていること。

• アニメーションが解決済みの hold time または start time を持っていること。

注記： pause-pending なアニメーションでは auto-align start time フラグが true の場合、 start time が正しく範囲に揃うように必要です。 start time の設定は 開始時刻自動調整手順に従って行います。

2.4.9. アニメーションのキャンセル

2.4.10. 速度制御

2.4.11. アニメーション全体の進行度の計算

アニメーションのoverallProgressは、 current timeと associated effect endの比率で定まる。

2.5. アニメーション効果

次の文章を追加：

animation の関連エフェクトは そのアニメーションに直接関連付けられていると呼ばれます。

アニメーションエフェクトはグループエフェクトを用いて階層構造にまとめられます（§ 2.10 Grouping and synchronization参照）。 その階層のルート アニメーションエフェクトだけが 直接アニメーションに関連付けられます。 親グループを持つアニメーションエフェクトが アニメーションの関連エフェクトに指定される場合、 そのエフェクトは関連付け前に親グループから削除される。

アニメーションエフェクトは アニメーションに関連付けられる のは、それが直接関連であるか 祖先となるグループエフェクトが 直接アニメーションに関連付けられている場合です。

2.5.1. アニメーションエフェクトの種類

本仕様は2種類のアニメーションエフェクトを定義します：

• キーフレームエフェクト、

• グループエフェクト

2.5.2. 活動区間（アクティブインターバル）

この仕様レベルでは活動区間（active interval）の下限が次のように定義されます：

アクティブインターバルの下限は エフェクト開始時刻で決まり、 エフェクトのstart delay によって調整されることもあります。

続く図では animation effect start time（アニメーションエフェクト開始時刻）を animation start time（アニメーション開始時刻）の代わりに参照する必要があります。

end delay の記述も次のように更新されます：

end delay も指定可能ですが、 主にシーケンスエフェクトなどアニメーションの連鎖時に有用です。

規範的記述は次のように更新：

アクティブインターバルの下限は、エフェクトの 開始時刻とstart delayの組み合わせで決まる。

アニメーションエフェクトの 開始時刻は、そのエフェクトの親グループ（あれば）が エフェクトの開始をスケジュールした時点。表現単位は継承時刻。

ほとんどの場合（親グループがない場合を含む）は、この開始時刻は0となる。 唯一の例外はシーケンスエフェクトで、これについては § 2.10.4.1 Sequence effectの子の開始時刻に記載。

開始時刻に加えて、 アニメーションエフェクトは start delay という開始時刻からのオフセットも持つ。 開始時刻。

開始時刻が親グループによって決まるのに対し、 start delay はエフェクト自身のプロパティである。

アニメーションエフェクト（animation effect）の アクティブインターバルの下限（継承時刻空間で表現）は 開始時刻とstart delayの和である。

これらの定義はローカル時刻（§ 2.5.3参照）やアクティブタイムの計算に組み込まれている。

そしてend timeの定義に関しては次の通り：

アニメーションエフェクト のend timeは max(開始時刻 + start delay + active duration + end delay, 0) で評価した結果とする。

2.5.3. ローカル時刻と継承時刻

この節は追加されました。

Web Animations では、すべての時刻は何らかの基準点に対する相対値として扱われます。 各基準点ごとに異なる 時刻空間 が生じます。

これはコンピュータグラフィックスで用いられる座標空間と比較できます。 時刻空間のゼロ時刻は、座標空間の原点に相当します。

座標空間と同様、時刻空間もネスト（入れ子）可能です。 グループエフェクトは多くの場合、 時刻値に 何らかの変形を加えて親 やアニメーションから受け取り、 その変形後の時刻値を子へ渡します。 子のアニメーション効果は、その変形後の時刻空間内で 動作します。

子は親から受け取った変形済み時刻値（これを継承時刻と呼ぶ）に 自身の開始時刻を加算し、下図のように 独自のローカル時刻空間 を確立します。

アニメーション効果における、その時点での継承時刻は、次のいずれか最初に該当する条件で決まります：

そのアニメーション効果が親グループを持つ場合

継承時刻は親グループの現在 変換済み時刻。

そのアニメーション効果がアニメーションに直接関連付けられている場合

継承時刻は アニメーションのcurrent time です。

それ以外の場合

継承時刻は未解決。

ローカル時刻は アニメーション効果の 継承時刻から開始時刻を引いた値です。 継承時刻が未解決の場合、 ローカル時刻も未解決となります。

2.5.4. アニメーション効果のフェーズと状態

in playの規範的な定義には次の条件が含まれています：

2. アニメーションエフェクトが親グループを持ち、その親グループがin playであるか、またはアニメーションエフェクトがアニメーションに直接関連付けられていてそのアニメーションがfinishedでない。

次の部分の代わりに：

2. アニメーションエフェクトがアニメーションに関連付けられていて、かつfinishedでない。

currentの規範的な定義には以下の条件が追加されています：

• アニメーションエフェクトが親グループを持ち、その親グループがcurrentである。

アニメーションエフェクトのphaseを決定する際に使用する用語リストに次の定義を追加します：

at progress timeline boundary

次の手順で判定します：

1. 次のいずれかの条件が真であれば：

   • 関連付けられているアニメーションのタイムラインが進捗ベースのタイムラインでない場合、または

   • 関連付けられているアニメーションのタイムラインdurationが未解決または0の場合、または

   • アニメーションの再生速度(playback rate)が0の場合

   falseを返す

2. effective start timeを、アニメーションのstart timeが解決済みならその値、そうでなければ0とする。

3. 次の一致する条件に基づきunlimited current timeを決定：

   start timeが解決済み：

   (timeline time - start time) × playback rate

   それ以外

   animationのcurrent time

4. effective timeline timeを次で計算する： unlimited current time / アニメーションの 再生速度(playback rate) + effective start time

5. effective timeline progressを次で計算する： effective timeline time / タイムラインduration

6. effective timeline progressが0または1の場合はtrue、それ以外はfalseを返す。

この手順は、アニメーションが一時停止中でアニメーションのcurrent timeが明示的に設定されている場合には、タイムラインのcurrent timeとアニメーションのcurrent timeとの間にリードやラグが生じるため厳密には正しくありません。

この手順はさらに簡略化でき、再生速度や開始時刻に関係なくスクロール境界かどうかのみ判定すればよいでしょう。ここで意図するのは、アニメーションがちょうどスクロール制限で非アクティブになる予期しない挙動を防ぐことなので、ScrollTimeline の場合 fill-mode の設定が不要になります。タイムラインcurrent timeが0またはタイムラインdurationであるか判定すれば十分かもしれません。

次の部分を：

アニメーションエフェクトは、そのローカルタイムがunresolvedでなく、かつ以下のいずれかが成り立つときbefore phaseにあります：

1. ローカルタイムがbefore-active boundary timeより小さい、または

2. animation directionが"backwards"で、ローカルタイムがbefore-active boundary timeに等しい。

次で置き換え：

アニメーションエフェクトは、そのローカルタイムがunresolvedでなく、かつ以下のいずれかが成り立つときbefore phaseにあります：

1. ローカルタイムがbefore-active boundary timeより小さい、または

2. animation directionが"backwards"で、ローカルタイムがbefore-active boundary timeに等しく、さらにat progress timeline boundaryではない。

次の部分を：

アニメーションエフェクトは、そのローカルタイムがunresolvedでなく、かつ以下のいずれかが成り立つときafter phaseにあります：

1. ローカルタイムがactive-after boundary timeより大きい、または

2. animation directionが"forwards"で、ローカルタイムがactive-after boundary timeに等しい。

次で置き換え：

アニメーションエフェクトは、そのローカルタイムがunresolvedでなく、かつ以下のいずれかが成り立つときafter phaseにあります：

1. ローカルタイムがactive-after boundary timeより大きい、または

2. animation directionが"forwards"で、ローカルタイムがactive-after boundary timeに等しく、さらにat progress timeline boundaryではない。

2.5.5. フィルモード

2.6. 繰り返し

2.6.1. 繰り返し区間

次の記述の後に：

1回分の繰り返しの長さをiteration duration（反復期間）という。

追加：

アニメーションエフェクトの初期のiteration durationは、その固有反復期間（intrinsic iteration duration）である。 固有反復期間は、以下のうち最初に一致する条件で計算する：

アニメーションエフェクトがグループエフェクトのとき

§ 2.10.3 グループエフェクトの固有反復期間の手順に従う

アニメーションエフェクトがシーケンスエフェクトのとき

§ 2.10.4.2 シーケンスエフェクトの固有反復期間の手順に従う

timeline duration が未解決、または iteration count が0の場合

0を返す

それ以外の場合

(100% - start delay - end delay) / iteration count を返す

注記： 現時点ではstart/end delayは0だが、将来的にパーセント指定がサポートされた際はこの計算式になる。

iteration durationは、著者によって固有反復期間以外の値も設定可能である。

2.6.2. 繰り返しの時刻空間

2.6.3. 区間タイミング

このセクションは規範的ではありません

記述は以下のように更新：

下記の例において、繰り返しエフェクトではローカル時刻1秒でiteration timeが0となる。 シーケンスのエフェクトでは、継承時刻1秒のとき、Bエフェクトのみ再生中となり、区間間に重なりは無い。

図も以下のように更新：

2.7. アニメーションエフェクトの速度制御

（このセクションは追加されました。）

アニメーションと同様に、アニメーションエフェクトにも playback rate（再生レート） パラメータがある。 再生レートは アニメーションエフェクトの変換後時刻（transformed time）をローカル時刻から算出するときに乗算する有限な実数である。

再生レート をアニメーションエフェクトに設定したときの効果は、 アニメーション自体の再生レートとは異なる。 詳細な挙動は§ 2.8 コアアニメーションエフェクト計算で定義されている。

2.8. コアアニメーションエフェクト計算

2.8.1. 概要

このセクションは規範的ではありません

次の記述を：

Web Animations タイミングモデルの核となるのは、ローカル時刻を iteration progress に変換する処理である。

以下で置き換え：

Web Animations タイミングモデルの核となるのは、継承時刻を iteration progress に変換する処理である。

図を更新し「アニメーションエフェクトの再生レート」を示す：

更新：

アクティブ期間が確定したら、 アニメーションエフェクトの ローカル時刻を 変換済み進行度（iteration progress）に変換する過程は下図のとおり。

以下で置き換え：

アクティブ期間が確定したら、 アニメーションエフェクトの 継承時刻を 変換済み進行度（iteration progress）に変換する過程は下図のとおり。

タイミング計算図も次のように更新：

次の文を：

最初のステップであるローカル時刻の計算は、Local timeに記載。

以下で置き換え：

最初のステップであるローカル時刻の計算手順は § 2.5.3 ローカル時刻と継承時刻に記載。

2.8.2. アクティブ期間の計算

次のように更新：

アクティブ期間を計算するため、まず 繰り返し期間 を以下の式で定義する：

繰り返し期間 = iteration duration × iteration count

iteration duration または iteration count のいずれかが0の場合、 繰り返し期間は0となる。

この定義は、無限大×0はIEEE 754-2008では未定義となっているため必要である。

アクティブ期間 は次のステップで計算する：

1. 再生レートが0のときは Infinity を返す。

2. それ以外は 繰り返し期間 / abs(再生レート) を返す。

2.8.3. ローカル時刻の変換

2.8.3.1. アクティブ時刻の計算

アクティブ時刻active timeの定義の条件に 親グループの参照を追加：

ただしこれは、アニメーションエフェクトが 出力すべき場合のみ定義されるため、そのfill modeと フェーズ、そして（あれば）親グループのフェーズに従い次のように分類される：

各フェーズへの追加手順：

アニメーションエフェクトが before phase の場合

結果は以下のうち最初に該当する条件による：

エフェクトが親グループを持ち、その親グループがafter phaseのとき

未解決な時刻値を返す。

…

アニメーションエフェクトが active phase の場合

結果は以下のうち最初に該当する条件による：

エフェクトが親グループを持ち、 その親グループがbefore phaseで、 このアニメーションエフェクトのfill modeがnoneもしくはforwardsのとき

未解決な時刻値を返す。

エフェクトが親グループを持ち、 その親グループがafter phaseで、 このアニメーションエフェクトのfill modeがnoneまたはbackwardsのとき

未解決な時刻値を返す。

それ以外

local time - start delay の結果を返す。

アニメーションエフェクトが after phase の場合

結果は以下のうち最初に該当する条件による：

エフェクトが親グループを持ち、 その親グループがbefore phaseのとき

未解決な時刻値を返す。

…

それ以外（local timeが未解決の場合）

未解決な時刻値を返す。

2.8.3.2. 全体進行度の計算

overall progressの定義の "Otherwise" 分岐の initial progress の部分を次のように更新：

それ以外の場合

overall progress を以下のうち最初に該当する条件で計算：

再生レートが0未満の場合

(active time - active duration) × 再生レート / iteration duration

再生レートが0の場合

overall progressは0とする。

その他

(active time × 再生レート) / iteration duration

2.9. 時刻変換

2.9.1. 変換済み進行度の計算

第2ステップを、before flag計算（エフェクトの再生レート対応）の内容で置き換え：

1. current directionがforwardsである、 または再生レートが0以上である （ただし両方ともtrueの場合は除く）のいずれかなら going forwardsをtrue、そうでなければfalseとする。

2.9.2. 変換済み時刻の計算

（このセクションは追加されました。）

アニメーションエフェクトの 変換済み時刻 は単純に 変換済み進行度 に iteration duration を掛けたものとなる。

変換済み進行度が未解決の場合、 変換済み時刻も未解決となる。

変換済み進行度が0で、iteration duration が無限大の場合、変換済み時刻は0となる。

2.10. グループ化と同期

このセクションは規範的ではありません

アニメーション効果 のタイミングプロパティを個別に設定することもできるが、 アニメーション効果の一部や全体を 共通タイミングで同期したい場合がある。これは グループエフェクト で実現される。

簡単な例を下図に示す。

グループエフェクトが アニメーションに直接関連付けられているとき、 そのグループエフェクトに関連付けられている アニメーション効果全体をまとめてシーク・一時停止・停止できる。

グループエフェクトは、アニメーションエフェクトの一種であり、 アニメーションエフェクトの順序付きの0個以上の並びを含み、これらを子エフェクトと呼びます。

任意の時点で、アニメーション効果は最大1つの グループエフェクトの 子エフェクトになれる。 これを 親グループ と呼ぶ。 親グループは 子エフェクト自身と同じアニメーション効果であってはならない。

グループエフェクトをネストすると 階層的なツリー構造を作れる。 こうした構造の部品や特性を記述する用語は [DOM]で定義されている：

• ツリー順序（tree order）

• ルート（root）

• 祖先（ancestor）

• 子孫（descendant）

• 包括的祖先（inclusive ancestor）

• 包括的子孫（inclusive descendant）

• 次の兄弟（next sibling）

• 前の兄弟（previous sibling）

• 最初の子（first child）

• 最後の子（last child）

注記： アニメーション効果への これら定義の適用において、「親」は親グループ(parent group)のみを指し、 アニメーション（概念的には親時刻ソースだが）は含まないことに注意。

子エフェクトとその 親グループの 時間関係は継承時刻定義(§ 2.5.3 ローカル時刻と継承時刻参照)に含まれる。

2.10.1. グループ時刻と子時刻の関係

このセクションは規範的ではありません

グループエフェクトの子のタイミングは グループ自身のタイミングに基づく。 具体的には、子の時刻は親の変換済み時刻を基準にする。 繰り返しに関しては、子は親の1イテレーション内で動作することになる。

たとえばグループエフェクト のiteration countが2の場合、 子アニメーションも2回再生される。実質的に親の繰り返し内で再生されるため。

この場合でも、子アニメーション効果の アクティブ区間は1つのみであることに注意。 しかし親タイミングの影響で アクティブ区間が2度再生されることになる。

グループの子にもiteration count を指定した場合、親子のiteration count の掛け算のように動作する。

さらに、子がグループ親の変換済み時刻を基準に 動作するので、親のアクティブ区間 の外ではアニメーションできなくなる。 これはグループの変換済み時刻が 区間外で変化しないためであり、 グループは子の再生をクリップできる。

親グループの変換済み時刻を基準にすることで次も当てはまる：

• グループエフェクト の再生レートを変えると全ての子の再生速度も変わる。

• 再生方向を変えると グループエフェクトの 全ての子の再生方向も変化する。

• タイミング関数を グループエフェクトに適用すると 全ての子の進行度に影響する。

2.10.2. グループエフェクトの子の開始時刻

グループエフェクトの 子エフェクトの 開始時刻は0とする。

ただし、グループエフェクトの具体的なタイプによってこの定義が上書きされる場合がある。

2.10.3. グループエフェクトの固有反復期間

グループエフェクトの 固有反復期間は 最後の子エフェクトの アクティブ区間が終わる 時刻で決まる。計算は下記のように子エフェクト数で変わる。

グループに子エフェクトが無い場合

固有反復期間は0。

それ以外

1. maximum end timeをグループ内すべての子エフェクトのend timeの最大値とする。 end timeは時刻またはパーセント（progress-based timelineの場合）で表現される。 時刻とパーセントが混在する場合、最大の時刻値が100%となるよう時間スケーリングする。

2. 固有反復期間 はmax(0, maximum end time)で評価した値とする。

この定義はグループエフェクトの具体的なタイプで上書きされる場合がある。

2.10.4. シーケンスエフェクト

このセクションは規範的ではありません

グループエフェクトの具体タイプで子の同期挙動を変えることができる。 本仕様ではさらに グループエフェクトの一種 シーケンスエフェクトを定義する。 シーケンスエフェクトは 子の開始時刻を順に調整し子を1つずつ再生する。

並列グループとシーケンスの違いを下図で比較：

グループエフェクトは 他のグループエフェクトを子にできるので、 異なるタイプのグループを組み合わせて複雑な同期も可能。 下図参照。

シーケンスエフェクトは グループエフェクトの 一種であり、グループ内の子エフェクトの 開始時刻を 調整して順番に再生する。

2.10.4.1. シーケンスエフェクトの子の開始時刻

シーケンスエフェクトの子エフェクトの開始時刻は、その子の直前の兄弟の終了時刻とする。子に直前の兄弟がなければ開始時刻は0である。

このセクションは規範的ではありません

アクティブ区間の開始は、アニメーションエフェクトの開始時刻とstart delayの合計なので、シーケンスエフェクトの子同士のアクティブ区間は、後述の図のようにstart delayを使って前後にずらし、厳密に連続でなく重複も可能である。

負のstart delayを使うことで2つの子のアクティブ区間を重ねることもできる。start delayはグループ内で後続の子の開始時刻にも影響する点に注意。

2.10.4.2. シーケンスエフェクトの固有反復期間

シーケンスエフェクトの固有反復期間は、仮想的にグループの子の末尾に子エフェクトを1つ追加したときの開始時刻に等しい（§ 2.10.4.1 シーケンスエフェクトの子の開始時刻参照）。ただし結果が負値になる場合、固有反復期間は0とする。

したがって、シーケンスエフェクトに子エフェクトがなければ固有反復期間は0となる。

3. アニメーションモデル

3.1. アニメーションの型

3.1.1. アニメーション不可

非アニメーションプロパティを対象とする効果についての記述を以下のように更新：

アニメーション効果がアニメーション不可なプロパティを対象としている場合でも、アニメーション効果として通常の挙動（シーケンスエフェクト内で時間を占める、シーケンスエフェクトで次の効果の実行を遅らせる、アニメーションのcurrent finished promiseのfulfillを遅延する等）を示す。

3.2. キーフレームエフェクト

3.2.1. キーフレームエフェクトの値

キーフレームエフェクトで参照される単一プロパティのエフェクト値を、iteration progress・current iteration・underlying valueそれぞれについて計算する手順は、keyframe effect composite mode を適用する手順の後に以下を追加する：

12. interval endpoints内の各keyframeに対し：

    1. （web-animations-1に同じ）

    2. このキーフレームエフェクトの反復合成操作がaccumulateの場合、下記の手順をcurrent iteration回繰り返す：

       • property-specific keyframesで最終の keyframe のtarget property の値（V_a）と、このkeyframeのtarget property値（V_b）について、accumulation procedure（プロパティに応じた加算処理）で合成し、その戻り値をkeyframeのtarget propertyの値に置き換える。

       注記： ここでの引数順は重要です。対象プロパティのアニメーション型が加算・合成処理を定めない場合、デフォルトではV_b（つまりkeyframeの値）が返ります。蓄積できないプロパティの場合でも、初期値として常にV_b（現イテレーションの値）になるべきなので、上記の手順通りにしています。

3.3. エフェクトの合成

3.3.1. エフェクトスタック

エフェクトの並び替え手順に次を追加：

1. ツリー順序でAとBをソートする。 （この時点でAとBは同じアニメーションに属する。そうでなければ直前の手順でソートできているはず。）

「アニメーション効果の関連アニメーション」の定義は、このレベルで導入したアニメーションに関連付けられるに基づくよう改訂が必要。グループエフェクトを正しく扱うためにも。

3.4. エフェクトの蓄積

エフェクト値同士の合成と同様に（Web Animations § 5.4.4 Effect composition参照）、反復合成操作は同一キーフレームエフェクトにおける繰り返し間の値の合成方法を決める。

本仕様が定義する反復合成操作は以下の2つ：

replace

各繰り返しは前の繰り返しの結果を無視して独立して計算する。

accumulate

アニメーションの各繰り返しは、前イテレーションの最終値と蓄積する。

反復合成操作の適用はエフェクト値計算（§ 3.2.1 キーフレームエフェクトの値）で組み込む。

3.6. アニメーショントリガ

3.6.1. 概要

アニメーショントリガは、 時間駆動アニメーションにおいて 関連付けられたアニメーションの再生制御に用いられる。 アニメーション同様、アニメーショントリガは タイムライン に関連付けられ、アタッチメント範囲にアタッチされる。

トリガがスクロール駆動アニメーションに影響すべきか？

3.6.2. アニメーショントリガ内部状態

アニメーショントリガ trigger は内部的に真偽値の did trigger フラグ（初期値false）と、 以下の値をとる内部状態stateを持つ：

idle

関連したアニメーション効果のanimationは before phaseに留まり、current timeは0となる。

primary

この値に切り替えたとき、animationに対しtypeで定義されたprimary動作タイプが適用される。

inverse

この値に切り替えたとき、animationにtypeで定義されたinverse動作タイプが適用される。

stateおよびdid triggerの 値は、後述のアニメーショントリガ状態の更新手順で更新される。

idle状態の仕様に正式な合意が必要か？

3.6.3. アニメーショントリガの振る舞い

アニメーショントリガは アニメーショントリガの振る舞いを持ち、 did trigger・stateとあわせて 関連アニメーションの再生制御に影響する。

アニメーショントリガに紐付くアニメーション効果は idle状態のとき、 常にbefore phaseかつ current timeは0に留まり、 triggerのdid trigger・stateの影響を受けない。 それ以外の時、behavior値ごとの再生制御は以下の通り：

once

stateがprimaryのとき

関連アニメーションをtriggerする。

それ以外

トリガは何もしない。

repeat

stateがprimaryのとき

関連アニメーションをtriggerする。

stateがinverseのとき

関連アニメーション効果を before phase、 関連アニメーションの start time を0へリセット。

alternate

stateがprimaryかつ did triggerがfalseのとき

関連アニメーションをtriggerする。

stateがprimaryかつ did triggerがtrueのとき

関連アニメーションをreverse（逆再生）する。

stateがinverseのとき

関連アニメーションをreverse（逆再生）する。

state

stateがprimaryのとき

関連アニメーションをtrigger/resumeする。

stateがinverseのとき

関連アニメーションをpauseする。

primary/inverse各「動作タイプ」のきちんとした定義が必要？

3.6.4. アニメーショントリガのアクティブ区間

各アニメーショントリガは アクティブ区間 を定義し、かつ1つだけ持つ。この区間はトリガのstateがprimary時の タイムライン進行区間である。

3.6.5. アニメーショントリガの範囲

アニメーショントリガは 2つの範囲、すなわち default range と exit range を持つ。 exit range はdefault rangeを置き換え、 アクティブ区間を拡張するために使われる。

exit rangeの端点はdefault rangeの端点以上に限るべきか？

直近のstate値stateによって、 アクティブ区間は次の条件で定まる：

stateがprimaryの場合

interval はexit rangeとなる。

それ以外

interval はdefault rangeとなる。

3.6.6. アニメーショントリガの設定

3.6.7. アニメーショントリガのタイムライン設定

3.6.8. アニメーショントリガ状態の更新

timelineが再びidleになったら"did trigger"フラグをfalseに戻すのが正しい/期待される挙動か？

4. プログラミングインターフェース

4.1. AnimationTimeline インターフェース

[Exposed=Window]
partial interface AnimationTimeline {
    readonly attribute CSSNumberish? currentTime;
    readonly attribute CSSNumberish? duration;
    Animation play (optional AnimationEffect? effect = null);
};

4.2. Animation インターフェース

Animation インターフェースの startTime および currentTime を更新し、さらに rangeStart、rangeEnd、overallProgress を以下のように追加します：

[Exposed=Window]
partial interface Animation {
    attribute CSSNumberish?       startTime;
    attribute CSSNumberish?       currentTime;
    attribute AnimationTrigger?   trigger;
    attribute (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeStart;
    attribute (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeEnd;
    readonly attribute double? overallProgress;
};

属性の説明を以下のように追加または更新します：

4.3. AnimationEffect インターフェース

[Exposed=Window]
partial interface AnimationEffect {
    // Timing hierarchy
    readonly attribute GroupEffect?     parent;
    readonly attribute AnimationEffect? previousSibling;
    readonly attribute AnimationEffect? nextSibling;

    undefined before (AnimationEffect... effects);
    undefined after (AnimationEffect... effects);
    undefined replace (AnimationEffect... effects);
    undefined remove ();
};

remove() メソッドはエフェクトを親グループまたはアニメーションから削除できます。これをレベル1に残し、単に“アニメーションから削除する”として定義するべきでしょうか？

4.4. EffectTiming および OptionalEffectTiming 辞書

partial dictionary EffectTiming {
    double delay;
    double endDelay;
    double playbackRate = 1.0;
    (unrestricted double or CSSNumericValue or DOMString) duration = "auto";
};

partial dictionary OptionalEffectTiming {
    double playbackRate;
};

注: 本仕様のこのバージョンでは、duration は CSSNumericValue として設定することはできません。しかし、getComputedTiming() で duration を解決する際に CSSNumericValue として返される場合があります。 将来バージョンの仕様では、duration を有効な時間単位またはパーセント単位の CSSNumeric 値として 設定できるようになる可能性があります。

4.5. AnimationEffect のタイミングを更新する

以下を置き換え：

input に 存在する各メンバーを、以下の対応関係に従って effect のタイミングプロパティに代入：

• delay → 開始遅延

• endDelay → 終了遅延

• fill → フィルモード

• iterationStart → 反復開始位置

• iterations → 反復回数

• duration → 反復期間

• direction → 再生方向

• easing → タイミング関数

次の内容に：

input に 存在する各メンバーを、以下の対応関係に従って effect のタイミングプロパティに代入：

• delay → 指定開始遅延

• endDelay → 指定終了遅延

• fill → フィルモード

• iterationStart → 反復開始位置

• iterations → 反復回数

• duration → 指定反復期間

• direction → 再生方向

• easing → タイミング関数

以下を追加：

指定タイミングの正規化手順に従うこと。

タイミングプロパティはスタイル変更によっても更新される場合があります。タイミングに影響を与える CSS アニメーションプロパティが変更された場合は 指定タイミングの正規化手順の再実行が必要です。

4.6. ComputedEffectTiming 辞書

partial dictionary ComputedEffectTiming {
    CSSNumberish         startTime;
    CSSNumberish         endTime;
    CSSNumberish         activeDuration;
    CSSNumberish?        localTime;
};

4.6.1. FillMode 列挙型

enum FillMode { "none", "forwards", "backwards", "both", "auto" };

auto

説明を以下のように更新：

GroupEffect に適用される場合は前後両方向のフィル、 KeyframeEffect に適用される場合はフィルなしとなります。

4.7. GroupEffect インターフェース

（本節は追加されました。）

グループエフェクトは GroupEffect インターフェースで表現されます。

[Exposed=Window]
interface GroupEffect {
  constructor(sequence<AnimationEffect>? children,
              optional (unrestricted double or EffectTiming) timing = {});

  readonly attribute AnimationNodeList  children;
  readonly attribute AnimationEffect?   firstChild;
  readonly attribute AnimationEffect?   lastChild;
  GroupEffect clone ();

  undefined prepend (AnimationEffect... effects);
  undefined append (AnimationEffect... effects);
};

4.7.1. timing 引数の処理

GroupEffect() や SequenceEffect() のコンストラクタに渡されるtimingパラメータは、EffectTiming オブジェクト、アニメーションエフェクトのミリ秒単位のdurationを示すdouble値、または undefined である場合があります。

次の「タイミング引数を処理する」 手順は、上述の入力値を正規化し、EffectTiming オブジェクトに変換します。

もしtimingが EffectTiming オブジェクトなら、

timing を返す。

もしtimingが double なら、

すべてのメンバーがデフォルト値で duration だけ timing に設定した新しい EffectTiming オブジェクトを返す。

それ以外（timingが undefined）なら、

すべてのメンバーがデフォルト値の新しい EffectTiming オブジェクトを返す。

4.7.2. 階層操作の定義

effect の「含まれない次の兄弟」 は、ある アニメーションエフェクト セット effects において、次の手順で決定されます：

1. context effect を effect とする。

2. context effect の次の兄弟が null でない間、以下の手順を繰り返す：

   1. context effect を 次の兄弟に更新。

   2. もし context effect が effects に含まれていなければ、 context effect を返して手順を終了。

3. null を返す。

アニメーションエフェクトを削除する には、effect をその親グループまたは アニメーションから取り除くため、下記条件で最初に該当した手順を実行します：

もしeffectが親グループを持つなら

effect を親グループの子エフェクトリストから除去する。

もしeffectがアニメーションに直接関連付けられているなら

effectをアニメーションの関連付けから外す。

複数のアニメーションエフェクト effects をparentの子エフェクトリストの reference childの前に挿入するには、各effectについて次の手順を行う：

1. 親からeffectを削除する。

2. effectをparentの子エフェクトリストのreference childの前に挿入する。

4.8. AnimationNodeList インターフェース

アニメーションエフェクトのリストは AnimationNodeList で表現できます。

AnimationNodeList インターフェースは 0 ≤ index < length の範囲のインデックス付きプロパティに対応しています。

このインターフェースが存在する唯一の理由は、DOMインターフェースで child nodes に children メンバー経由でアクセスできることに慣れている作者に親しみやすい体験を提供するためです。

[Exposed=Window]
interface AnimationNodeList {
    readonly attribute unsigned long length;
    getter AnimationEffect? item (unsigned long index);
};

4.9. SequenceEffect インターフェース

シーケンスエフェクトは SequenceEffect インターフェースで表されます。

[Exposed=Window]
interface SequenceEffect : GroupEffect {
  constructor(sequence<AnimationEffect>? children,
              optional (unrestricted double or EffectTiming) timing = {});

  SequenceEffect clone ();
};

4.10. KeyframeEffect インターフェース

KeyframeEffect インターフェースは以下を追加して修正されます：

partial interface KeyframeEffect {
    attribute IterationCompositeOperation    iterationComposite;
};

4.10.1. 新しいKeyframeEffect オブジェクトの作成

new SequenceEffect(
  [
    new KeyframeEffect(elem, { opacity: 0 }, 1000),
    new KeyframeEffect(elem, { visibility: 'hidden' }, { fill: 'forwards' })
  ]
);

4.10.2. *Keyframe 辞書の型修正

ComputedKeyframe、 BaseComputedKeyframe、 BaseKeyframe、 BasePropertyIndexedKeyframe などの offset キーの double? 型は (CSSNumberish? or TimelineRangeOffset or DOMString) に置き換えられます。 double は引き続きパーセントとして解釈され、 DOMString は <keyframe-selector> 構文で TimelineRangeOffset にパースされます。得られたTimelineRangeOffset または CSSNumericValue は @keyframes の定義に従って解釈されます。

DOMString の値が有効な <keyframe-selector> としてパースできなかった場合、そのキーフレームは無効になり、 [[web-animations-1#processing-a-keyframes-argument|処理される]]際に TypeError を投げます （double 値が [0,1] 範囲外の場合と同じです）。

4.10.3. KeyframeEffectOptions 辞書

KeyframeEffectOptions 辞書インターフェースに次のメンバーを追加します：

partial dictionary KeyframeEffectOptions {
    IterationCompositeOperation iterationComposite = "replace";
};

enum IterationCompositeOperation { "replace", "accumulate" };

callback EffectCallback = undefined (double? progress,
                                (Element or CSSPseudoElement) currentTarget,
                                Animation animation);

dictionary TimelineRangeOffset {
  CSSOMString? rangeName;
  CSSNumericValue offset;
};

partial dictionary KeyframeAnimationOptions {
    (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeStart = "normal";
    (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeEnd = "normal";
    AnimationTrigger? trigger;
};

[Exposed=Window]
interface AnimationPlaybackEvent : Event {
    constructor(DOMString type, optional AnimationPlaybackEventInit
    eventInitDict = {});
    readonly attribute CSSNumberish? currentTime;
    readonly attribute CSSNumberish? timelineTime;
};
dictionary AnimationPlaybackEventInit : EventInit {
    CSSNumberish? currentTime = null;
    CSSNumberish? timelineTime = null;
};

[Exposed=Window]
interface AnimationTrigger {
  constructor(optional AnimationTriggerOptions options = {});
  attribute AnimationTimeline timeline;
  attribute AnimationTriggerBehavior behavior;
  attribute any rangeStart;
  attribute any rangeEnd;
  attribute any exitRangeStart;
  attribute any exitRangeEnd;
};

dictionary AnimationTriggerOptions {
  AnimationTimeline? timeline;
  AnimationTriggerBehavior? behavior = "once";
  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeStart = "normal";
  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeEnd = "normal";
  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) exitRangeStart = "auto";
  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) exitRangeEnd = "auto";
};

enum AnimationTriggerBehavior { "once", "repeat", "alternate", "state" };