ウェブアニメーション

1. はじめに

// アニメーションの半分までシークしてopacityが50%か確認
for (const animation of elem.getAnimations()) {
  const { delay, activeDuration } = animation.effect.getComputedTiming();
  animation.currentTime = delay + activeDuration / 2;
}
assert.strictEqual(getComputedStyle(elem).opacity, '0.5');

// アニメーション終了後にロード画面が非表示になることを確認
for (const animation of elem.getAnimations()) {
  animation.finish();
}
// イベントハンドラが動作するよう1フレーム待つ
requestAnimationFrame(() => {
  assert.strictEqual(
    getComputedStyle(document.querySelector('#loading')).display, 'none');
});

2. 仕様の規約

この仕様は、アニメーションやアニメーション効果などの抽象概念、およびそれらに属する再生速度や反復期間などのプロパティについて説明することから始まります。 これらのプロパティに加えて、再生速度を設定する手順や開始時刻を設定する手順など、プロパティを更新するための特定の手続きが存在することがよくあります。

この仕様で特定の手順へのリンクがない場合、ユーザーエージェントがプロパティを更新するよう求められるテキスト（例：「animationの開始時刻を未解決にする」）は、関連する手順を呼び出すことなく直接プロパティを更新することを指すものと理解してください。

この仕様に特有でないさらなる文書規約については、文書の規約で説明されています。

3. ウェブアニメーションモデル概要

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

概観として、Webアニメーションモデルは主に2つの独立した構成要素、タイミングモデルとアニメーションモデルから構成されています。それぞれの役割は下記の通りです：

タイミングモデル

ある時刻を受け取り、反復進捗と呼ばれるアニメーションの1回の反復内での割合に変換します。 また、いくつかのアニメーションが反復するたびに挙動が異なるため、反復インデックスも記録されます。

アニメーションモデル

タイミングモデルによって生成された反復進捗値や反復インデックスを受け取り、それらをターゲットプロパティに適用する値の系列へと変換します。

この流れは、図示すると以下のように表せます：

例として、以下のようなアニメーションを考えます：

• 3秒後に開始する

• 2回実行される

• 毎回2秒かかる

• 四角形の幅を50ピクセルから100ピクセルに変化させる

最初の3つのポイントはタイミングモデルに関係します。 6秒の時点ではアニメーションが2回目の反復の半分まで進んでいると計算され、0.5という結果を出します。 アニメーションモデルはその情報を用いて幅を計算します。

この仕様はタイミングモデルから始まり、続いてアニメーションモデルに進みます。

4. タイミングモデル

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

4.1. タイミングモデル概要

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

Web Animationsタイミングモデルには2つの特徴があります。ステートレスであり、階層構造を持ちます。

4.1.1. ステートレス

Web Animationsタイミングモデルは、入力時刻を受け取り、出力として反復進捗を生成します。 出力は入力時刻のみに基づき、過去の入力に依存しないため、このモデルはステートレスと記述できます。 この性質により、モデルには以下の特性があります：

フレームレート非依存

出力は過去の入力に依存しないため、モデルの更新頻度が進捗に影響することはありません。 入力時刻が実時間の進捗に比例していれば、デバイスの性能に関係なくアニメーションは同じ速度で進行します。

方向非依存

入力の順序が重要でないため、モデルは方向性を持ちません。 そのため、モデルを任意の時刻に更新する際に特別な処理は不要です。

定数時間でのシーク

各入力が過去の入力と独立しているため、将来の任意の時刻へのシーク操作に必要な処理は、少なくとも理論上は定数時間です。

タイミングモデルのステートレスな挙動にはいくつか例外があります。

まず、モデルのプログラミングインターフェースで定義されたメソッドのいくつかは、 アニメーションの一時停止などの再生制御を提供します。 これらのメソッドは呼び出された時刻に基づいて定義されるため、状態的（stative）です。 これらのメソッドは主に利便性のために提供されており、コアのタイミングモデルには含まれず、上位レイヤーで実装されています。

同様に、アニメーションの終了時の挙動では、 メディア（関連効果）の終了時刻に動的な変更が加えられると、変更のタイミングによって異なる結果になることがあります。 この挙動は直感的かつHTMLと整合的であると判断されており、惜しいながらも採用されています。 そのため、モデルはタイミングプロパティに動的変更がない限りステートレスとみなせます。

最後に、モデルが更新されるたび、一時的な状態が確立されると考えられます。 この一時状態はプログラミングインターフェースから返される値に影響しますが、次回の更新には影響せず、上述のステートレスな性質と矛盾しません。

4.1.2. 階層構造

タイミングモデルのもう一つの特徴は、時間が継承されることです。 時間はタイムラインから始まり、複数のステップを経て各アニメーション効果へとカスケードします。 各ステップで、時間は前後にシフトしたり、スケールしたり、反転したり、一時停止したり、繰り返されたりします。

この仕様レベルでは階層は浅いですが、今後の仕様レベルでグループ効果の概念が導入され、より深いタイミング階層が可能になります。

4.2. 時間値

タイミングはタイミングノード間の階層的な時間関係に基づいています。 親ノードは時間値という形で子ノードにタイミング情報を提供します。

時間値は、ある瞬間からのミリ秒数を表す実数です。 時間値と実際の壁時計のミリ秒との関連は、 時間階層を通過する際に適用される様々な変換によって不明瞭になることがあります。

将来的には、スクロール位置やUIジェスチャーに基づくタイムラインもあり得ます。その場合、時間値とミリ秒との関係はさらに弱まります。

時間値は、例えばタイミングノードが時間値を生成できない状態の場合など、未解決にもなり得ます。

4.3. タイムライン

タイムラインは、同期のための時間値の発生源を提供します。

任意の時点で、タイムラインは、単一の現在の時間値を持ち、単純にタイムラインの現在時刻と呼ばれます。

タイムラインは、常に意味のある時間値を返すとは限らず、未解決な時間値しか返せない場合があります。 例えば、ドキュメントのloadイベント発火など、まだ発生していない瞬間を基準として定義されている場合です。 タイムラインは、その時間値が未解決である時、非アクティブタイムラインとみなされます。

タイムラインは、報告された現在時刻が前回の報告時点より常に大きいか等しい場合、単調増加タイムラインです。

特定の種類のタイムラインは、タイムライン時刻をオリジン基準時刻に変換する手順を定義でき、時間値timeに対して、壁時計ベースのタイムラインで生成された時間値同士を比較できるようにします。

タイムラインはドキュメントに関連付けられたタイムラインとなる場合があります。

アニメーションの更新とイベント送信をDocumentdocでタイムスタンプnowに対して実行する場合、以下の手順を踏みます：

1. docに関連付けられた全ての現在時刻を持つタイムラインの現在時刻を、タイムスタンプとしてnowを渡して更新します。

   タイミングモデルの階層性により、タイムラインの現在時刻を更新する際には、以下も含みます：

   • 該当タイムラインに関連付けられたアニメーションの現在時刻の更新。

   • 現在時刻が更新されたアニメーションに対してアニメーションの完了状態の更新手順を実行。

   • そのようなアニメーションのアニメーションイベントのキューイング。

2. 置換されたアニメーションの削除をdocに対して行います。

3. マイクロタスクチェックポイントの実行。

   注: これは、前のステップでタイムラインの更新の一環としてPromiseオブジェクトの解決や拒否によってキューされたマイクロタスクが、アニメーションイベントのディスパッチより先にコールバックされることを保証するためです。

4. events to dispatchをdocの保留中アニメーションイベントキューのコピーとする。

5. docの保留中アニメーションイベントキューをクリアする。

6. events to dispatch内のアニメーションイベントを以下の方法で安定ソートする：

   1. イベントを予定イベント時刻でソートし、予定時刻が早いものほど前に、未解決の予定イベント時刻のイベントは解決済みより前に並べる。

   2. 同じ予定イベント時刻のイベント同士は、合成順序でソートする。

   注: イベントの順序を安定してソートする目的は、異なるデバイスの性能やフレームレートにかかわらず、できる限りイベントを一貫した順序でディスパッチするためです。

   注: 安定ソートが必要なのは、同時刻でキューされるイベントが時々あるためです。たとえばCSSアニメーションでdurationが0の場合、animationstartとanimationend両方のイベントが同時にディスパッチされ、その順序を保持する必要があります。

7. ディスパッチ手順に従い、events to dispatch内の各イベントを対応するターゲットに、前ステップで定めた順序で送信する。

この手順を実行するたび、新たなアニメーションフレームが確立されると表現すると便利な場合があります。 アニメーションやアニメーション効果のタイミングプロパティの変更やオブジェクトの追加・削除は、タイミングモデルやアニメーションモデルの出力を変化させることがありますが、これら操作自体は新しいアニメーションフレームを作成するのではなく、単に現在のアニメーションフレームを更新するだけです。

4.3.1. ドキュメントタイムライン

ドキュメントタイムラインは、タイムラインの一種であり、ドキュメントに関連付けられ、現在時刻が、アニメーションの更新とイベント送信手順が毎回実行される際に与えられるnowタイムスタンプからの固定オフセットとして計算されます。 この固定オフセットはドキュメントタイムラインの起点時刻と呼ばれます。

"origin time"より良い用語が必要です—"time origin"と似すぎています。[Issue #2079]

関連付けられたドキュメントのタイムオリジンが確立される前は、ドキュメントタイムラインは非アクティブです。

ドキュメントタイムラインがアクティブになると、単調増加となります。

ドキュメントタイムラインが、Documentで、アクティブなドキュメントでない場合も、非アクティブとみなされます。

タイムライン時刻timeline timeをオリジン基準時刻に変換するには、ドキュメントタイムラインtimelineに対して、timeline timeとtimelineの起点時刻の合計を返す。timelineが非アクティブの場合は、未解決の時間値を返す。

4.3.2. デフォルトドキュメントタイムライン

各Documentは、ドキュメントタイムラインを持ち、これをデフォルトドキュメントタイムラインと呼びます。 デフォルトドキュメントタイムラインは各ドキュメントごとに固有であり、document.open() [HTML]の呼び出しを含め、ドキュメントの存続期間中持続します。

デフォルトドキュメントタイムラインの起点時刻はゼロです。

4.4. アニメーション

アニメーションは、単一のアニメーション効果（関連効果と呼ばれる）をタイムラインに結びつけ、再生制御を提供します。 これらの関連付けは両方とも任意かつ設定可能であり、 アニメーションは、ある時点で関連効果もタイムラインも持たない場合があります。

アニメーションのタイミング用ドキュメントは、そのタイムラインが関連付けられているDocumentです。 アニメーションがタイムラインに関連付けられていない場合や、そのタイムラインがドキュメントに関連付けられていない場合、タイミング用ドキュメントはありません。

アニメーションの開始時刻は、関連効果の再生開始が予定される時点のタイムラインの時間値です。 開始時刻は初期状態では未解決です。

アニメーションは、ホールド時刻（時間値）も保持しており、一時停止などの状況でアニメーションの出力時間値（現在時刻）を固定するために用いられます。 ホールド時刻も初期状態では未解決です。

競合するアニメーションの相対順序を確立するため、アニメーションは作成された順にグローバルアニメーションリストへ追加されます。ただし、特定のアニメーションクラスは、アニメーションの順序付けに別の方法を提供することがあります（§ 5.4.1 アニメーションクラス参照）。

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

アニメーションのタイムラインを設定する手順（animationをnew timelineに設定、nullも可）は次の通りです：

1. old timelineをanimationの現在のタイムライン（あれば）とする。

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

3. animationのタイムラインをnew timelineに設定する。

4. animationの開始時刻が解決済みなら、animationのホールド時刻を未解決にする。

   注: このステップは、animationの完了再生状態が「固着」せず、更新された現在時刻に基づいて再評価されることを保証します。

5. animationに対して、did seekフラグをfalse、synchronously notifyフラグをfalseに設定し、アニメーションの完了状態の更新手順を実行する。

4.4.2. アニメーションの関連効果設定

アニメーションの関連効果を設定する手順（animationをnew effectに設定、nullも可）は次の通りです：

1. old effectをanimationの現在の関連効果（あれば）とする。

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

3. animationに保留中一時停止タスクがあれば、animationがreadyになるとすぐにそのタスクを再スケジュールする。

4. animationに保留中再生タスクがあれば、animationがreadyになりnew effectを再生できるときにそのタスクを再スケジュールする。

5. new effectがnullでなく、かつnew effectが他のアニメーション（previous animation）の関連効果である場合、previous animationに対しこの手順をnullをnew effectとして再実行する。

6. animationの関連効果をnew effectにする。

7. animationに対して、did seekフラグをfalse、synchronously notifyフラグをfalseに設定し、アニメーションの完了状態の更新手順を実行する。

4.4.3. アニメーションの現在時刻

アニメーションは、関連効果に対して時間値を提供し、それをアニメーションの現在時刻と呼びます。

現在時刻は以下から最初に一致する条件で計算されます：

4.4.4. アニメーションの現在時刻の設定

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

現在時刻を静かに設定する手順（animationの現在時刻をseek timeに設定）は次の通りです：

1. seek timeが未解決な時間値の場合、以下の手順を実行する。

   1. 現在時刻が解決済みなら、TypeErrorをスローする。

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

2. animationのホールド時刻または開始時刻を以下の通り更新する：

   以下のいずれかが真の場合：

   • animationのホールド時刻が解決済み、または

   • animationの開始時刻が未解決、または

   • animationに関連付けられたタイムラインがない、または関連タイムラインが非アクティブ、または

   • animationの再生速度が0

   animationのホールド時刻をseek timeに設定する。

   それ以外の場合

   animationの開始時刻を次で評価した結果に設定する： timeline time - (seek time / 再生速度) ここでtimeline timeは、animationに関連付けられたタイムラインの現在の時間値です。

3. animationに関連付けられたタイムラインがない、または関連タイムラインが非アクティブなら、animationの開始時刻を未解決にする。

   これは、アクティブなタイムラインがない場合、開始時刻または現在時刻のどちらかだけを設定できるという不変条件を保持します。

4. animationの直前の現在時刻を未解決にする。

現在時刻を設定する手順（animationの現在時刻をseek timeに設定）は次の通りです：

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

2. animationに保留中一時停止タスクがあれば、次の手順で一時停止操作を同期的に完了する：

   1. animationのホールド時刻をseek timeに設定する。

   2. 保留中再生速度をanimationに適用する。

   3. animationの開始時刻を未解決にする。

   4. 保留中一時停止タスクをキャンセルする。

   5. resolve手順でanimationの現在のreadyプロミスをanimationで解決する。

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

4.4.5. アニメーションの開始時刻の設定

開始時刻を設定する手順（animation、animationの開始時刻をnew start timeに設定）は次の通りです：

1. timeline timeを、animationに関連付けられたタイムラインの現在の時間値とする。 animationに関連付けられたタイムラインがない、または関連タイムラインが非アクティブの場合は、timeline timeを未解決とする。

2. timeline timeが未解決かつnew start timeが解決済みの場合、animationのホールド時刻を未解決にする。

   これは、アクティブなタイムラインがない場合、開始時刻か現在時刻のどちらか一方のみ設定可能という不変条件を保持します。

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

   注: これは前のステップの変更後の現在時刻であり、現在時刻が未解決になる場合があります。

4. 保留中再生速度の適用をanimationに行う。

5. animationの開始時刻をnew start timeに設定する。

6. animationのホールド時刻を下記から最初に一致する条件で更新する：

   new start timeが解決済みの場合

   animationの再生速度がゼロでない場合、animationのホールド時刻を未解決にする。

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

   animationのホールド時刻をprevious current timeに設定する（previous current timeが未解決でも）。

7. animationに保留中再生タスクまたは 保留中一時停止タスクがあれば、そのタスクをキャンセルし、resolve手順で animationの現在のreadyプロミスをanimationで解決する。

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

4.4.6. 関連効果の待機

アニメーションは、以下の両方の条件が初めて真になる瞬間に準備完了となります：

• ユーザーエージェントが、アニメーションの関連効果の再生開始に必要なセットアップ（キーフレーム効果の初回レンダリングを含む）を完了している。

• アニメーションが、非アクティブでないタイムラインに関連付けられている。

4.4.7. 現在のreadyプロミス

各アニメーションは現在のreadyプロミスを持ちます。 現在のreadyプロミスは、初期状態では解決済みのPromiseであり、アニメーション自身を値として新たな解決済みPromiseを作成する手順で生成され、アニメーションの関連Realmで作成されます。

このオブジェクトは、アニメーションが新たに保留中再生タスクや保留中一時停止タスクをキューした場合（以前は保留中タスクがなかった場合）、またはアニメーションがキャンセルされた場合（§ 4.4.14 アニメーションのキャンセル参照）には、新しいPromiseオブジェクトに置き換えられます。

animation.pause();
animation.ready.then(function() {
  // 'running'と表示
  alert(animation.playState);
});
animation.play();

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

アニメーションを再生する手順（animation、auto-rewindフラグ付き）は次の通りです：

1. aborted pauseを、animationに保留中一時停止タスクがあればtrue、なければfalseとする。

2. has pending ready promiseを初期値falseのブール値とする。

3. seek timeを初期状態では未解決な時間値とする。

4. auto-rewindフラグがtrueの場合、以下から最初に一致する条件の手順を実行：

   animationの実効再生速度が0以上、かつ現在時刻が：

   • 未解決、または

   • 0未満、または

   • 関連効果終了以上、

   seek timeを0に設定する。

   animationの実効再生速度が0未満、かつ現在時刻が：

   • 未解決、または

   • 0以下、または

   • 関連効果終了より大きい、

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

   throw "InvalidStateError" DOMException を投げて、 これらの手順を中止する。

   それ以外の場合

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

5. 以下3条件がすべて満たされた場合：

   • seek timeが未解決で、

   • animationの開始時刻が未解決で、

   • animationの現在時刻が未解決のとき、

   seek timeを0に設定する。

   注: このステップにより、auto-rewindフラグの設定に関係なく、アイドル状態のアニメーションは再生されます。

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

7. seek timeが解決済みなら：

   has finite timelineがtrueの場合

   1. animationの開始時刻をseek timeに設定する。

   2. animationのホールド時刻を未解決とする。

   3. 保留中再生速度の適用をanimationに行う。

   それ以外の場合

   animationのホールド時刻をseek timeに設定する。

8. animationのホールド時刻が解決済みなら、開始時刻を未解決とする。

9. animationに保留中再生タスクまたは保留中一時停止タスクがあれば、

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

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

10. 以下4条件がすべて満たされた場合：

    • animationのホールド時刻が未解決で、

    • seek timeが未解決で、

    • aborted pauseがfalseで、

    • animationに保留中再生速度がない場合、

    この手順を中止する。

11. has pending ready promiseがfalseの場合、animationの現在のreadyプロミスをanimationの関連Realmで新しいPromiseにする。

12. animationが準備完了になるとすぐに実行されるタスクをスケジュールする。そのタスクは次を実行：

    1. animationの開始時刻またはホールド時刻のいずれかが解決済みであることをアサートする。

    2. ready timeをanimationが準備完了になった瞬間の関連タイムラインの時間値とする。

    3. 以下から最初に一致する条件に従う：

       animationのホールド時刻が解決済みの場合

       1. 保留中再生速度の適用をanimationに行う。

       2. new start timeをready time - ホールド時刻 / 再生速度で評価した結果とする。再生速度が0ならnew start timeはready timeとする。

       3. animationの開始時刻をnew start timeに設定する。

       4. 再生速度が0でなければ、animationのホールド時刻を未解決とする。

       animationの開始時刻が解決済みで、保留中再生速度がある場合

       1. current time to matchを(ready time - 開始時刻) × 再生速度で評価した結果とする。

       2. 保留中再生速度の適用をanimationに行う。

       3. 再生速度が0なら、animationのホールド時刻をcurrent time to matchにする。

       4. new start timeをready time - current time to match / 再生速度で評価した結果とする。再生速度が0ならnew start timeはready timeとする。

       5. animationの開始時刻をnew start timeに設定する。

    4. resolve手順でanimationの現在のreadyプロミスをanimationで解決する。

    5. animationに対して、did seekフラグをfalse、synchronously notifyフラグをfalseに設定し、アニメーションの完了状態の更新手順を実行する。

       上記2ステップの順序は重要です。ゼロ長の関連効果を持つアニメーションでは、現在のreadyプロミスが現在のfinishedプロミスより先に解決されます。

    このタスクがスケジュールされて未実行の間、animationは保留中再生タスクを持つとされます。タスク実行中はanimationは保留中再生タスクを持たないとされます。

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

    上記の保留中再生タスクを非同期に実行する要件は、次のようなコードが各実装で一貫した挙動となることを保証します：

    animation.play();
    animation.ready.then(
      () => { console.log('Playback commenced'); },
      () => { console.log('Playback was canceled'); }
    );
    // 何らかの条件で再生をキャンセルする必要があると仮定...
    animation.cancel();
    // "Playback was canceled" がコンソールに出力される。
    

    上記コードで保留中再生タスクを同期的に実行した場合、現在のreadyプロミスはrejectされません。

13. animationに対して、did seekフラグをfalse、synchronously notifyフラグをfalseに設定し、アニメーションの完了状態の更新手順を実行する。

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

アニメーションの開始時刻が未解決のとき、その現在時刻は一時停止されます。

アニメーションの再生と同様、一時停止は即座に発生しない場合があります（§ 4.4.6 関連効果の待機参照）。 例えば、アニメーションが別プロセスで実行されている場合、アニメーションプロセスによって描画された状態を反映するために現在時刻を同期する必要があるかもしれません。

アニメーションを一時停止する手順（animation）は次の通りです：

1. animationに保留中一時停止タスクがあれば、これらの手順を中止する。

2. animationの再生状態がpausedの場合、これらの手順を中止する。

3. seek timeを初期状態では未解決な時間値とする。

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

5. animationの現在時刻が未解決の場合、以下から最初に一致する条件に従う：

   animationの再生速度が0以上の場合

   seek timeを0に設定する。

   それ以外の場合

   もし associated effect end が animation に対して正の無限大の場合

   throw "InvalidStateError" DOMException を投げて、これらの手順を中止する。

   それ以外の場合

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

6. seek timeが解決済みの場合：

   has finite timelineがtrueの場合

   animationの開始時刻をseek timeに設定する。

   それ以外の場合

   animationのホールド時刻をseek timeに設定する。

7. has pending ready promiseを初期値falseのブール値とする。

8. animationに保留中再生タスクがあれば、そのタスクをキャンセルし、has pending ready promiseをtrueにする。

9. has pending ready promiseがfalseの場合、animationの現在のreadyプロミスをanimationの関連Realmで新しいPromiseに設定する。

10. 以下の両方の条件が初めて満たされた瞬間に実行されるタスクをスケジュールする：

    • ユーザーエージェントがanimationの関連効果（あれば）の再生を一時停止するための処理を完了している。

    • アニメーションが非アクティブでないタイムラインに関連付けられている。

    タスクは次の手順を実行します：

    1. ready timeを、ユーザーエージェントがanimationの関連効果の一時停止処理を完了した瞬間のタイムラインの時間値とする。

    2. animationの開始時刻が解決済みでホールド時刻が解決済みでない場合、 ホールド時刻を (ready time - 開始時刻) × 再生速度で評価した結果とする。

       注: ホールド時刻は、アニメーションが完了状態の場合や、保留中再生タスクがある場合はすでに設定されていることがあります。 いずれの場合もpaused状態に入る際にホールド時刻を維持したいです。

    3. 保留中再生速度の適用をanimationに行う。

    4. animationの開始時刻を未解決にする。

    5. resolve手順でanimationの現在のreadyプロミスをanimationで解決する。

    6. animationに対して、did seekフラグをfalse、synchronously notifyフラグをfalseに設定し、アニメーションの完了状態の更新手順を実行する。

    上記のタスクがスケジュールされて未実行の間、animationは保留中一時停止タスクを持つとされます。タスク実行中はanimationは保留中一時停止タスクを持たないとされます。

    保留中再生タスクと同様、ユーザーエージェントは保留中一時停止タスクを非同期で実行する必要がありますが、それは次のマイクロタスクチェックポイントでも構いません。

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

4.4.10. 終了に到達

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

DVDプレイヤーやカセットプレイヤーは、通常メディアの終端まで再生し、到達すると停止します。 これらのプレイヤーが逆再生できる場合、メディアの始端に到達すると停止するのが一般的です。 この挙動を模倣し、HTMLのメディア要素 [HTML]との一貫性を持たせるため、 Web Animationsのアニメーションの現在時刻は、 その関連効果の終了時刻を超えて再生されず、逆再生の場合は0未満に進行しません。

アニメーションが再生範囲の自然な境界に達した場合、完了したと言います。

現在時刻の制限効果は下図のとおりです。

ただし、現在時刻を関連効果の終了後にシークすることは可能です。 その場合、現在時刻は進行せず、アニメーションはシークされた時刻で一時停止したかのように振る舞います。

例えば、関連効果がないアニメーションの現在時刻を5秒にシークすることもできます。 後から5秒より遅い終了時刻を持つ関連効果がそのアニメーションに関連付けられた場合、再生は5秒から始まります。

上記と同様の挙動は、アニメーションの関連効果の長さが変化した場合にも発生します。

また、再生速度が負の場合、現在時刻は0未満には進行しません。

4.4.11. 現在のfinishedプロミス

各アニメーションは現在のfinishedプロミスを持ちます。 現在のfinishedプロミスは初期状態ではpendingなPromiseオブジェクトです。

アニメーションが完了再生状態を離れるたび、新しいpromiseに置き換えられます。

4.4.12. 完了状態の更新

再生速度が正の場合、 現在時刻は 関連効果終了まで増加し続けます。

関連効果終了は、アニメーションの関連効果の終了時刻と等しいです。 アニメーションに関連効果がない場合、関連効果終了は0になります。

再生速度が負の場合、 現在時刻は0まで減少し続けます。

この境界に到達（または通過）し、開始時刻が解決済みの実行中アニメーションは完了状態になります。

この境界の判定は、アニメーションオブジェクトを変更するたびに、下記のアニメーションの完了状態の更新手順でチェックされます。この手順はアニメーションの更新とイベント送信手順の一部としても実行されます。いずれの場合も、下記定義のdid seekフラグはfalseです。

各アニメーションについて、ユーザーエージェントは直前の現在時刻（時間値）を管理します。初期値は未解決です。

通常再生中はアニメーションの現在時刻は上記の境界に制限されますが、 現在時刻を設定する手順を使えば境界外の時刻にシークすることも可能です。

アニメーションの完了状態の更新手順（animation、did seekフラグ（現在時刻設定後か示す）、synchronously notifyフラグ（完了イベントのキューイングやfinished promiseの即時解決を期待する文脈か示す））は次の通りです：

1. unconstrained current timeを、did seekがfalseならホールド時刻に未解決時間値を代入して現在時刻を計算した結果、trueなら現在時刻自身とする。

   注: タイムラインの方向が変わる場合にも対応するために必要です。これがないと、一度完了したアニメーションがタイムラインが逆方向に進んでも完了のままになります。

2. 以下3条件がすべて真なら、

   • unconstrained current timeが解決済みである

   • animationの開始時刻が解決済みである

   • animationが保留中再生タスクや保留中一時停止タスクを持たない

   この場合、下記条件でanimationのホールド時刻を更新：

   再生速度が0より大きく、unconstrained current timeが関連効果終了以上の場合

   did seekがtrueならホールド時刻をunconstrained current timeにする。

   falseならホールド時刻を、直前の現在時刻と関連効果終了の最大値にする。 直前の現在時刻が未解決の場合はホールド時刻を関連効果終了にする。

   再生速度が0未満、unconstrained current timeが0以下の場合

   did seekがtrueならホールド時刻をunconstrained current timeにする。

   falseならホールド時刻を直前の現在時刻と0の最小値にする。 直前の現在時刻が未解決の場合はホールド時刻を0にする。

   再生速度が0でなく、animationがアクティブタイムラインに関連付けられている場合

   以下を実行：

   1. did seekがtrueかつホールド時刻が解決済みなら、animationの開始時刻を timeline time - (ホールド時刻 / 再生速度) で評価した値にする。timeline timeは関連するタイムラインの現在の時間値。

   2. ホールド時刻を未解決にする。

3. animationの直前の現在時刻を現在時刻で計算した値にする。

4. current finished stateを、animationの再生状態が完了ならtrue、それ以外はfalseとする。

5. current finished stateがtrueで現在のfinishedプロミスが未解決なら、下記を実行：

   1. 完了通知手順は下記手順：

      1. animationの再生状態が完了でない場合、これらの手順を中止する。

      2. resolve手順でanimationの現在のfinishedプロミスをanimationで解決する。

      3. AnimationPlaybackEvent（finishEvent）を作成。

      4. finishEventのtype 属性をfinishに設定する。

      5. finishEventのcurrentTime 属性をanimationの現在時刻に設定する。

      6. finishEventのtimelineTime 属性をanimationの関連タイムライン現在時刻に設定する。タイムラインがないか、非アクティブの場合は、timelineTimeはnull。

      7. animationにタイミング用ドキュメントがあれば、そのタイミング用ドキュメントの保留中アニメーションイベントキューにターゲットanimationと共に追加する。予定イベント時刻には、変換したanimationの関連効果終了のオリジン基準時刻を使う。

         それ以外の場合は、タスクをキューし、finishEventをanimationにディスパッチする。そのタスクソースはDOM操作タスクソース。

   2. synchronously notifyがtrueなら、キュー済みの完了通知マイクロタスクをキャンセルし、直ちに完了通知手順を実行する。

      falseなら、マイクロタスクをキューして、すでにキューされていなければanimationの完了通知手順を実行する。

6. current finished stateがfalseで、animationの現在のfinishedプロミスが既に解決済みなら、animationの現在のfinishedプロミスを新しいPromise（animationの関連Realm）にする。

var animation = elem.animate({ left: '100px' }, 2000);
animation.playbackRate = 2;
animation.currentTime = 1000; // animationは今完了
animation.effect.updateTiming({ iterations: 2 }); // animationはもう完了ではない

var animation = elem.animate({ left: '100px' }, 1000);
animation.finish(); // finishイベントは即座にキューされ、finished promiseも
                    // 解決される。次の文で
                    // animationが完了状態でなくなっても。
animation.currentTime = 0;

4.4.13. アニメーションの完了

アニメーションは、下記のアニメーションの完了手順を使うことで、現在の再生方向の自然な終端まで進めることができます：

1. もし animation の effective playback rate が 0 である場合、 または animation の effective playback rate が 0 より大きく、 associated effect end が無限大の場合は、 throw "InvalidStateError" DOMException を投げて、これらの手順を中止する。

2. Apply any pending playback rate を animation に適用する。

3. limit を次のように設定する：

   もし playback rate が 0 より大きい場合

   limit を associated effect end にする。

   それ以外の場合

   limit を 0 にする。

4. Silently set the current time を limit に設定する。

5. もし animation の start time が unresolved であり、かつ animation が関連付けられた active timeline を持つ場合、 start time を timeline time - (limit / playback rate) （timeline time は関連付けられた timeline の現在の time value）で評価した値にする。

6. もし pending pause task が存在し、start time が resolved の場合、

   1. hold time を unresolved にする。

      通常、hold time はすでに未解決ですが、animation が以前 idle 状態だった場合は例外です。

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

   3. Resolve で animation の current ready promise を animation で解決する。

7. もし pending play task が存在し、 start time が resolved の場合、そのタスクをキャンセルし、 resolve で animation の current ready promise を animation で解決する。

8. animation に対して、did seek フラグを true、synchronously notify フラグを true に設定し、 update an animation’s finished state 手順を実行する。

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

アニメーションはキャンセルすることができ、これにより現在時刻が未解決となり、関連効果による効果がすべて削除されます。

アニメーションをキャンセルする手順（animation）は次の通りです：

1. animationの再生状態がidleでない場合、以下を実行：

   1. 保留中タスクのリセット手順をanimationに実行する。

   2. reject手順でanimationの現在のfinishedプロミスを"AbortError"のDOMExceptionでrejectする。

   3. 現在のfinishedプロミスの[[PromiseIsHandled]]内部スロットをtrueにする。

   4. animationの現在のfinishedプロミスを、新しいPromise（animationの関連Realm）にする。

   5. AnimationPlaybackEvent（cancelEvent）を作成する。

   6. cancelEventのtype属性をcancelに設定する。

   7. cancelEventのcurrentTimeをnullに設定する。

   8. timeline timeを、animationが関連付けられているタイムライン現在時刻とする。タイムラインがアクティブでない場合は、timeline timeを未解決な時間値とする。

   9. cancelEventのtimelineTimeをtimeline timeに設定する。timeline timeが未解決なら、nullに設定する。

   10. animationにタイミング用ドキュメントがあれば、タイミング用ドキュメントの保留中アニメーションイベントキューにcancelEventとターゲットanimationを追加する。animationがアクティブなタイムラインに関連付けられており、タイムライン時刻をオリジン基準時刻に変換する手順を定義している場合は、予定イベント時刻をその手順でtimeline timeを変換した結果とする。 それ以外の場合は、予定イベント時刻を未解決な時間値とする。

       それ以外の場合は、タスクをキューし、cancelEventをanimationにディスパッチする。タスクソースはDOM操作タスクソース。

2. animationのホールド時刻を未解決にする。

3. animationの開始時刻を未解決にする。

保留中タスクのリセット手順（animation）は次の通りです：

1. animationが保留中再生タスクも保留中一時停止タスクも持たない場合、この手順を中止する。

2. animationが保留中再生タスクを持つ場合、そのタスクをキャンセルする。

3. animationが保留中一時停止タスクを持つ場合、そのタスクをキャンセルする。

4. 保留中再生速度の適用をanimationに行う。

5. reject手順でanimationの現在のreadyプロミスを"AbortError"のDOMExceptionでrejectする。

6. animationの現在のreadyプロミスの[[PromiseIsHandled]]内部スロットをtrueにする。

7. animationの現在のreadyプロミスを新たな解決済みPromiseオブジェクト（値はanimation、animationの関連Realm）にする。

4.4.15. 速度制御

アニメーションは 再生速度 を持ち、 関連付けられたタイムラインの時間値の変化速度からアニメーションの現在時刻へのスケーリング係数を提供します。 再生速度の初期値は1です。

アニメーションの再生速度を0に設定すると、事実上一時停止状態になります（ただし再生状態が必ずしも一時停止になるとは限りません）。

4.4.15.1. アニメーションの再生速度の設定

再生速度の設定手順（ アニメーション animationをnew playback rateに設定）は次の通りです：

1. animation の保留中再生速度をクリアする。

2. previous timeを、現在時刻の変更前の値とする。

3. previous playback rateを、animationの現在の実効再生速度とする。

4. 再生速度をnew playback rateに設定する。

5. 以下のうち最初に一致する条件の手順を実行：

   animationが単調増加 なタイムラインに関連付けられており、previous timeが解決済みの場合

   現在時刻の設定手順でanimationの現在時刻をprevious timeにする。

   animationがnull以外のタイムラインに関連付けられていて、かつ単調増加でなく、 animationの開始時刻が解決済み、 関連効果終了が無限大でなく、かつ いずれかが成立する場合：

   • previous playback rate < 0 かつ new playback rate ≥ 0

   • previous playback rate ≥ 0 かつ new playback rate < 0

   animationの開始時刻を 関連効果終了 - 開始時刻 で評価した値にする。

   注: この操作は非単調タイムライン上でアニメーションの開始／終了時刻を反転し、開始時刻の相対オフセットを保ちます。

4.4.15.2. アニメーションの再生速度をシームレスに更新する

別プロセスやスレッド上で実行中のアニメーションの場合、 再生速度の設定手順は、 アニメーションの実行プロセス／スレッドが更新操作側と同期していないとジャンプを引き起こす可能性があります。

アニメーションの再生速度をシームレスに変更するために、 アニメーションには 保留中再生速度 を持たせることができ、 必要な同期後に（他プロセスやスレッドの場合）適用されます。

初期状態で保留中再生速度は未設定です。

実効再生速度は、 animationの保留中再生速度があればそれを、なければ再生速度を使います。

アニメーション animationに 保留中再生速度の適用を行う手順：

1. animationが保留中再生速度を持たない場合、これらの手順を中止する。

2. animationの再生速度を保留中再生速度に設定する。

3. animationの保留中再生速度をクリアする。

再生速度をシームレスに更新する手順（アニメーション animation、new playback rateで現在時刻を保ったまま）は次の通りです：

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

   注: animationの実効再生速度を更新する前に再生状態を記録する必要があります。 このロジックでは、animationが現在完了状態であれば、保留中再生速度を即座に適用したいからです。

2. animationの保留中再生速度をnew playback rateに設定する。

3. 以下から最初に一致する条件による手順を実行：

   animationが保留中再生タスクまたは保留中一時停止タスクを持つ場合

   これらの手順を中止する。

   注: 保留中タスクの種類によって、走行中に保留中再生速度が適用されるため、追加アクションは不要です。

   previous play stateがidleまたは一時停止、あるいはanimationの現在時刻が未解決の場合

   保留中再生速度の適用手順をanimationに実行する。

   注: 2つ目の条件は、未解決の現在時刻かつ保留中再生タスクがない実行中アニメーションに対して、以下の再生処理を行わないようにするためです。

   previous play stateが完了の場合

   1. unconstrained current timeを、animationの現在時刻をホールド時刻に未解決時間値を代入して計算した値とする。

   2. animationの開始時刻を timeline time - (unconstrained current time / 保留中再生速度) （timeline timeは関連タイムラインの現在時間値）に設定する。

      保留中再生速度が0なら、animationの開始時刻はtimeline timeとする。

   3. 保留中再生速度の適用手順をanimationに実行する。

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

   それ以外の場合

   アニメーション再生手順でanimationのauto-rewindフラグをfalseで実行する。

4.4.16. アニメーションの逆再生

アニメーションの逆再生手順（animation animation）は次の通りです：

1. もしanimationに関連付けられているタイムラインが存在しない場合、または関連付けられているタイムラインが非アクティブである場合、throwし、「InvalidStateError」DOMExceptionを発生させ、これらの手順を中止する。

2. original pending playback rate を animation の pending playback rate とする。

3. animation の pending playback rate を effective playback rate の加法逆数（すなわち -effective playback rate）に設定する。

4. animation に対して auto-rewind フラグを true にして play an animation の手順を実行する。

   もし play an animation の手順で例外が発生した場合は、animation の pending playback rate を original pending playback rate に戻し、例外を伝播する。

4.4.17. 再生状態

アニメーションは、以下のいずれかの再生状態となり得ます。各状態には非規範的な説明も付与されています：

animation animation の再生状態は、次の条件のうち最初に一致する状態となります：

animation.effect.updateTiming({ duration: 5000 });
animation.currentTime = 4000;
animation.pause();
animation.ready.then(function() {
  animation.effect.updateTiming({ duration: 3000 });
  alert(animation.playState); // 'paused'と表示
  animation.startTime =
    document.timeline.currentTime - animation.currentTime * animation.playbackRate;
  alert(animation.playState); // 'finished'と表示
});

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

アニメーションイベントには、この仕様で定義されるアニメーション再生イベントや、 CSSトランジションのイベント [CSS-TRANSITIONS-1]、 CSSアニメーションのイベント [CSS-ANIMATIONS-1] が含まれます。 今後の仕様でさらに多様なアニメーションイベントが追加される可能性もあります。

各Documentは、保留中アニメーションイベントキューを保持し、アニメーションイベントとその対応するイベントターゲット、 予定イベント時刻を格納します。 予定イベント時刻は時間値であり、 タイムオリジン基準で、アニメーションが無限に高頻度で更新された場合にイベントが理想的にディスパッチされるタイミングを表します。 この値はアニメーションの更新とイベント送信手順でキューされたアニメーションイベントを時系列でソートするために使われます。 なお、この値は例えばアニメーションのタイムラインがタイムオリジンと無関係な値を生成する場合（例：スクロール位置を追跡するタイムライン）や、 タイムラインが非アクティブの場合は未解決となることがあります。

4.4.18.1. アニメーションイベントのソート

以下の定義は、イベントキューのソートを補助するためのものです。

アニメーション時刻をタイムライン時刻に変換する手順： 時間値 time（アニメーションの開始時刻基準）について、以下を実行：

1. timeが未解決なら、timeを返す。

2. timeが無限大なら、未解決な時間値を返す。

3. アニメーションの再生速度が0なら、未解決な時間値を返す。

4. アニメーションの開始時刻が未解決なら、 未解決な時間値を返す。

5. 次を計算して返す：time × (1 / playback rate) + start time （playback rateとstart timeはそれぞれアニメーションの再生速度と開始時刻）。

タイムライン時刻を原点相対時刻に変換するには、時間値 time（時間値と同じスケールで表現される）、タイムライン timelineについて、次の手順を実行します。

1. timeline timeを、アニメーション時刻をタイムライン時刻に変換する手順でtimeを変換した結果とする。

2. timeline timeが未解決なら、timeを返す。

3. アニメーションがタイムラインに関連付けられていない場合、未解決な時間値を返す。

4. アニメーションが非アクティブタイムラインに関連付けられている場合、未解決な時間値を返す。

5. 関連タイムラインにタイムライン時刻をオリジン基準時刻に変換する手順がない場合、未解決な時間値を返す。

6. 関連タイムラインの定義された手順でtimeline timeをオリジン基準時刻に変換した結果を返す。

4.4.18.2. アニメーション再生イベント

アニメーションの再生中に、状態の変化はアニメーション再生イベントによって報告されます。

アニメーション再生イベントはタイミングモデルのプロパティです。そのため、アニメーションの関連効果が存在しない場合や目に見える結果がない場合でも、イベントはディスパッチされます。

4.4.18.3. アニメーション再生イベントの種類

finish

アニメーションがfinished再生状態になったときにキューされます。

cancel

アニメーションが他の状態からidle再生状態になったときにキューされます。新たなアニメーションが最初からidleの場合はcancelイベントは生成されません。

remove

アニメーションが自動的に削除されたときにキューされます。 詳細は§ 5.5 アニメーションの置換参照。

4.5. アニメーション効果

アニメーション効果は、タイミング階層内の項目を指す抽象的な用語です。

4.5.1. アニメーション効果とアニメーションの関係

アニメーションの関連効果（設定されていれば）は、アニメーション効果の一種です。 関連効果は、そのアニメーションに関連付けられていると言います。 ある時点では、アニメーション効果は最大で1つのアニメーションにのみ関連付けられます。

アニメーション効果effectは、timelineに関連付けられていると言えるのは、effectがアニメーションに関連付けられていて、そのアニメーションがtimelineに関連付けられている場合です。

4.5.2. アニメーション効果の種類

この仕様では、キーフレーム効果という1種類のアニメーション効果のみを定義しています。 今後の仕様レベルでさらに多様なアニメーション効果が定義されます。

すべてのアニメーション効果は、以下のセクションで説明する共通プロパティを持ちます。

4.5.3. アクティブ区間

アニメーション効果が実行される期間をアクティブ区間と呼びます。 各アニメーション効果はこの区間を1つだけ持ちます。

アクティブ区間の下限は、通常はこのアニメーション効果に関連付けられたアニメーションの開始時刻に対応しますが、アニメーション効果の開始遅延によってシフトする場合があります。

区間の上限はアクティブ期間によって決まります。

開始時刻、開始遅延、アクティブ期間の関係は下図で説明します。

終了遅延も指定可能ですが、主にアニメーションのシーケンス制御時に使われます。

アニメーション効果は、アクティブ区間を定義します。この区間は、効果がその効果を生むようにスケジュールされている期間であり、アクティブ区間外で適用される塗りつぶしモードは例外です。

アクティブ区間の下限は開始遅延で定義されます。

開始遅延は、アニメーション効果が関連付けられたアニメーションの開始時刻からの符号付きオフセットです。

アクティブ区間の長さはアクティブ期間と呼ばれ、計算方法は§ 4.8.2 アクティブ期間の計算で定義されています。

開始遅延に似て、アニメーション効果には 終了遅延もあり、主に他のアニメーション効果の終了時刻基準でシーケンス制御する際に使われます。 これは通常シーケンス効果（今後の仕様で導入）と組み合わせてのみ有効ですが、SVGのmin属性（[SVG11]第19章）表現の目的でここに含まれます。

終了時刻は、アニメーション効果に対しmax(開始遅延 + アクティブ期間 + 終了遅延, 0)で評価されます。

4.5.4. ローカル時刻

ローカル時刻は、ある時点のアニメーション効果について、以下から最初に一致する条件で決まります：

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

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

ある時点で、アニメーション効果は3つのフェーズのいずれかにあります。 アニメーション効果がローカル時刻を未解決で持つ場合、いずれのフェーズにも属しません。

フェーズの違いは下図で示します。

フェーズの種類：

前フェーズ

アニメーション効果のローカル時刻がアクティブ区間や終了時刻よりも前、または負の開始遅延期間中。

アクティブフェーズ

アニメーション効果のローカル時刻がアクティブ区間内かつ負の開始遅延や負の終了遅延期間外。

後フェーズ

アニメーション効果のローカル時刻がアクティブ区間以降、または負の終了遅延により先に終了時刻に到達した場合。ただし負の開始遅延期間中は除く。

これらのフェーズに加えて、アニメーション効果は複数の重複する状態にも分類できます。 状態は1フレームだけ確立され、主にモデルの静的部分記述のために使われます。

これらの状態とモデル内での使い方の概要：

再生中

各フレームでアクティブ時刻が変化するアニメーション効果に対応。

現在

再生中、または現在のアニメーションの再生速度次第で今後再生中になる可能性があるアニメーション効果に対応。

効果中

解決済みのアクティブ時刻を持つアニメーション効果に対応。 これはアニメーション効果がアクティブフェーズにある場合や、アクティブフェーズ外でも塗りつぶしモード（§ 4.6 塗りつぶし挙動参照）によりアクティブ時刻が解決される場合。 効果中のアニメーション効果のみがターゲットに結果を適用します。

これらの状態の規範的定義は後述します。

アニメーション効果のフェーズ判定には以下の定義が必要です：

アニメーション方向

効果がアニメーションに関連付けられていて、関連アニメーションの再生速度が0未満なら"逆方向"、それ以外は"順方向"。

アクティブ前境界時刻

max(min(開始遅延, 終了時刻), 0)

アクティブ後境界時刻

max(min(開始遅延 + アクティブ期間, 終了時刻), 0)

アニメーション効果は、前フェーズにあるのは、効果のローカル時刻が未解決でなく、かつ以下いずれかの条件を満たす場合：

1. ローカル時刻がアクティブ前境界時刻未満、または

2. アニメーション方向が"逆方向"で、ローカル時刻がアクティブ前境界時刻と等しい場合。

アニメーション効果は、後フェーズにあるのは、効果のローカル時刻が未解決でなく、かつ以下いずれかの条件を満たす場合：

1. ローカル時刻がアクティブ後境界時刻より大きい、または

2. アニメーション方向が"順方向"で、ローカル時刻がアクティブ後境界時刻と等しい場合。

アニメーション効果は、アクティブフェーズにあるのは、効果のローカル時刻が未解決でなく、かつ前フェーズでも後フェーズでもない場合です。

さらに、上記いずれのフェーズにも属さない場合をアイドルフェーズと呼ぶことがあります。

アニメーション効果は、再生中であるのは、以下すべての条件が真の場合です：

1. アニメーション効果がアクティブフェーズにあり、かつ

2. アニメーション効果がアニメーションに関連付けられていて、しかもそのアニメーションが完了状態ではない。

アニメーション効果は、現在であるのは、以下いずれかの条件が真の場合です：

• アニメーション効果が再生中である場合

• アニメーション効果がアニメーションに関連付けられていて、再生速度が0より大きく、アニメーション効果が前フェーズである場合

• アニメーション効果がアニメーションに関連付けられていて、再生速度が0未満、アニメーション効果が後フェーズである場合

• アニメーション効果がアニメーションに関連付けられていて、アイドル状態でなく、nullでない関連タイムラインに関連付けられていて、しかもそのタイムラインが単調増加でない場合

アニメーション効果は、効果中であるのは、アクティブ時刻（§ 4.8.3.1 アクティブ時刻の計算参照）が未解決でない場合です。

4.5.6. 関連アニメーション

アニメーションがアニメーション効果の関連に基づいて関連すると定義できます。

アニメーションが関連となる条件：

• 関連効果が現在または効果中であり、かつ

• 置換状態がremovedでない。

4.6. 塗りつぶし挙動

アニメーション効果が再生中でないときの効果は、その塗りつぶしモードによって決まります。

塗りつぶしモードの種類は以下の通りです：

• none（なし）

• forwards（順方向）

• backwards（逆方向）

• both（両方）

これらモードの規範的定義は、アクティブ時刻の計算（§ 4.8.3.1 アクティブ時刻の計算）に組み込まれています。

// 次のアニメーションが完了した直後の最初のフレームで、`finished` promiseのコールバックは
// スタイル更新前に実行されるため、ちらつきません。
elem.animate({ transform: 'translateY(100px)' }, 200).finished.then(() => {
  elem.style.transform = 'translateY(100px)';
});

elem.style.transform = 'translateY(100px)';
elem.animate({ transform: 'none', offset: 0 }, 200);

elem.addEventListener('click', async evt => {
  const animation = elem.animate(
    { transform: `translate(${evt.clientX}px, ${evt.clientY}px)` },
    { duration: 800, fill: 'forwards' }
  );
  await animation.finished;
  // commitStylesは`animation`までのスタイルを記録し、elemの指定スタイルを更新します。
  animation.commitStyles();
  animation.cancel();
});

4.6.1. 塗りつぶしモード

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

各塗りつぶしモードの効果は次の通りです：

none

アニメーション効果が再生中でない場合、何の効果もありません。

forwards

アニメーション効果が後フェーズにある場合、 スケジュール上最後に再生中だった瞬間と同じ反復進行度値を生成します。

その他の再生中でない時は効果がありません。

backwards

アニメーション効果が前フェーズにある場合、 スケジュール上最初に再生中になる瞬間と同じ反復進行度値を生成します。

その他の再生中でない時は効果がありません。

both

アニメーション効果が前フェーズにある場合はbackwards塗りつぶし挙動が使われます。

アニメーション効果が後フェーズにある場合はforwards塗りつぶし挙動が使われます。

これら塗りつぶしモードの例を以下に示します。

注: 塗りつぶしモードの設定はアクティブ区間の端点やフェーズ間境界には影響しません。 ただし塗りつぶしモードはタイミングモデルの他のプロパティに影響します。なぜならアクティブ時刻は、 アニメーション効果がアクティブフェーズ内または塗りつぶしが適用される場合のみ定義される（未解決でない）ためです。

4.7. 反復

4.7.1. 反復区間

アニメーション効果が一定回数または無限に繰り返すよう指定することができます。 この反復はアクティブ区間内で行われます。 1回の反復が行われる時間領域を反復区間と呼びます。

アクティブ区間とは異なり、アニメーション効果は複数の反復区間を持つことができますが、通常は現在の反復に対応する区間のみが重要です。

1回の反復の長さは反復期間と呼ばれます。 アニメーション効果の初期反復期間は0です。

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

反復期間とアクティブ期間を比較すると：

反復期間

アニメーション効果が1回反復するのにかかる時間。

アクティブ期間

全アニメーション効果が完了するまでの時間（反復も含む）。 これは反復期間より長い場合も短い場合もあります。

反復期間とアクティブ期間の関係は下図で説明します。

4.7.2. 反復の制御

アニメーション効果が繰り返す回数は反復回数と呼ばれます。 反復回数は0以上の実数です。 反復回数が正の無限大の場合、アニメーション効果は無限に繰り返されます。

反復回数に加え、アニメーション効果には反復開始プロパティもあり、アニメーション効果が始まる反復系列内のオフセットを指定します。 反復開始は0以上の有限実数です。

これらパラメータの挙動は§ 4.8 コアアニメーション効果計算で定義されています。

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

反復回数と反復開始パラメータの効果は下図で示します。

反復回数パラメータとは異なり、反復開始パラメータはアクティブ期間の長さには影響しません。

反復開始が1以上の場合、アニメーション効果がiteration composite operationでaccumulateを指定している場合以外は、一般に有用ではありません。

4.7.3. 反復時空間

この節は非規範的です

Web Animationsでは、すべての時刻は何らかの基準点に対して相対的です。 これら異なる基準点によって、異なる時空間が生じます。

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

繰り返されるアニメーションについては、アニメーションが繰り返されるごとに新しい時空間が確立されると説明できます。それが反復時空間です。

反復時空間とは、アニメーション効果の現在の反復の開始がゼロ時刻となる時空間です。

Web Animationsモデル内では、アクティブ時刻についても言及します。これはアクティブ区間の開始に対して相対的な時刻です。 ただし、この時空間はモデル内部でのみ使用され、プログラミングインターフェースやマークアップには公開されません。

これらの時空間を下図に示します。

注: 時空間自体には境界はありませんが、Web Animationsではアクティブ時刻や反復進行度が、図に示されるように一定範囲に制限されます。 例えば、アクティブ時空間で-1秒という時刻は有効ですが、アクティブ時刻の計算法（§ 4.8.3.1 アクティブ時刻の計算）では負の値が返されることはありません。

これら以外にも、ドキュメント時空間についても言及できます。これは、時間値がデフォルトドキュメントタイムライン上で表される時空間であり、Documentの現在のグローバルオブジェクトに属します。

4.7.4. 区間タイミング

この節は非規範的です

アニメーション効果が繰り返されるとき、反復の境界での動作を定義する必要があります。 これには、そしてすべての区間タイミングについて、Web Animationsは端点排他的なタイミングモデルを採用しています。 これは、区間の開始時刻は区間に含まれ、終了時刻は含まれないことを意味します。 区間表記では[開始, 終了)と書きます。 このモデルによって、区間を繰り返したり並べた場合でも区間同士が重複しません。

以下の例では、繰り返し効果においてローカル時刻1秒の時、反復時刻は0となります。 シーケンスされたアニメーションでは、タイムライン時刻1秒の時、アニメーションBの関連効果のみが再生中であり、重複はありません。

この動作の例外として、塗り（fill）を行う場合、塗りが区間の端点で始まるときはその端点が使用されます。 この動作は§ 4.8.3.3 単純反復進行度の計算のアルゴリズムから導かれ、下図で示されます。

4.8. コアアニメーション効果の計算

4.8.1. 概要

この節は非規範的です

Web Animationsのタイミングモデルの中心は、ローカル時刻値を反復進行度に変換する処理です。

この処理の第一段階は、アクティブ区間の境界を計算することです。これはアクティブ持続時間によって決まります。

この処理を下図に示します。

アクティブ持続時間の計算法は、§ 4.8.2 アクティブ持続時間の計算で現行標準的に定義されています。

アクティブ持続時間が確定したら、アニメーション効果のローカル時刻を変換済み進行度（反復進行度）に変換する処理が下図で示されます。

最初のステップであるローカル時刻の計算は、§ 4.5.4 ローカル時刻で説明されています。 図のステップ2〜4は次節以降で説明します。 ステップ5と6は、§ 4.9.1 指向性進行度の計算および§ 4.10.1 変換済み進行度の計算で説明されています。

4.8.2. アクティブ持続時間の計算

アクティブ持続時間は次のように計算します：

アクティブ持続時間 = 反復期間 × 反復回数

反復期間または反復回数のいずれかが0の場合、アクティブ持続時間は0となります。

この明確化は、IEEE 754-2008において無限大とゼロの乗算結果が未定義であるため必要です。

4.8.3. ローカル時刻の変換

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

アクティブ時刻は、ローカル時刻と開始遅延に基づきます。 ただし、これはアニメーション効果が出力を生成すべき場合のみ定義され、そのため塗りモードやフェーズによって以下のように決まります：

4.8.3.2. 全体進行度の計算

全体進行度は、完了した反復回数（部分反復も含む）を示し、以下のように定義されます：

1. アクティブ時刻が未解決の場合、未解決を返します。

2. 以下の条件のうち最初に一致したものに基づいて、overall progressの初期値を計算します：

   反復期間が0の場合

   アニメーション効果がbeforeフェーズであれば、overall progressは0とし、それ以外の場合は反復回数とします。

   それ以外の場合

   overall progressは アクティブ時刻 / 反復期間 の計算結果とします。

3. overall progress + 反復開始 の計算結果を返します。

4.8.3.3. 単純反復進行度の計算

単純反復進行度は、現在の反復内での進行度の割合であり、再生方向や効果に適用されるタイミング関数による時刻変換を無視し、以下のように計算されます：

1. 全体進行度が未解決の場合、 未解決を返します。

2. 全体進行度が無限大の場合、simple iteration progressは 反復開始 % 1.0 とし、それ以外の場合は 全体進行度 % 1.0 とします。

3. 以下のすべての条件が真の場合：

   • 上記で計算したsimple iteration progressが0である かつ

   • アニメーション効果がactiveフェーズ または afterフェーズである かつ

   • アクティブ時刻がアクティブ持続時間と等しい かつ

   • 反復回数が0ではない。

   simple iteration progressは1.0とします。

   上記の手順により、アニメーションのアクティブ区間が反復の終了点と一致した場合、次の反復の開始ではなく最終反復の端点を保持して塗りを行う動作が実現されます。

   最後の条件は、反復回数が0でアニメーションが1度も再生されていない場合にこの動作が適用されないようにします。

4. simple iteration progressを返します。

4.8.4. 現在の反復の計算

現在の反復は、以下の手順で計算できます：

1. アクティブ時刻が未解決の場合、未解決を返します。

2. アニメーション効果がafterフェーズ かつ 反復回数 が無限大の場合、無限大を返します。

3. 単純反復進行度が1.0の場合、 floor(全体進行度) - 1 を返します。

4. それ以外の場合、 floor(全体進行度) を返します。

4.9. 方向制御

アニメーション効果は、方向制御によって反復ごとに異なる方向で再生するよう設定できます。 このために、アニメーション効果には再生方向パラメータがあり、次のいずれかの値を取ります：

• normal,

• reverse,

• alternate, または

• alternate-reverse.

これらの値の意味は、後述する指向性進行度の計算に組み込まれています。

4.9.1. 指向性進行度の計算

指向性進行度は、単純反復進行度から以下の手順で計算されます：

1. 単純反復進行度が未解決の場合、未解決を返します。

2. 以下のリストから最初に一致した条件に基づいて、current directionを計算します：

   再生方向がnormalの場合

   current directionはforwardsとします。

   再生方向がreverseの場合

   current directionはreverseとします。

   それ以外の場合

   1. dを現在の反復とします。

   2. 再生方向がalternate-reverseの場合、dを1増やします。

   3. d % 2 == 0であればcurrent directionはforwards、それ以外ならreverseとします。 dが無限大の場合はcurrent directionはforwardsとします。

3. current directionがforwardsなら単純反復進行度を返します。

   それ以外の場合は 1.0 - 単純反復進行度 を返します。

4.10. 時刻変換

アニメーション効果の進行速度を制御したいことは多くあります。 例えば、アニメーションの速度をイージングすることで、動きに勢いを持たせ、より自然な効果が得られます。 CSS Easing Functions Module [CSS-EASING-1] は、この目的のためのタイミング関数を定義しています。

アニメーション効果には 1つのタイミング関数が関連付けられています。 デフォルトのタイミング関数は線形タイミング関数です。

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

変換済み進行度は、指向性進行度から以下の手順で計算します：

1. 指向性進行度が未解決の場合、 未解決を返します。

2. before flagの値を次のように計算します：

   1. § 4.9.1 指向性進行度の計算で定義された手順に従い、current directionを決定します。

   2. current directionがforwardsの場合、 going forwardsはtrue、それ以外はfalseとします。

   3. アニメーション効果がbeforeフェーズかつgoing forwardsがtrue、 またはアニメーション効果がafterフェーズかつgoing forwardsがfalseのとき、 before flagをセットします。

3. アニメーション効果のタイミング関数に、指向性進行度を入力進行度値として、before flagをbefore flagとして渡した評価結果を返します。

4.11. 反復進行度

反復進行度は、アニメーション効果の変換済み進行度そのものです。

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

5.1. 概要

アニメーション効果は、タイミング出力の変化に応じて影響を与えるゼロ個以上の関連プロパティを持ちます。これらのプロパティは効果のターゲットプロパティと呼ばれます。

反復進行度、現在の反復、基底値が与えられると、アニメーション効果は、 各アニメーション可能なターゲットプロパティについて、 そのプロパティに適したアニメーション型の手順を適用して 効果値を生成します。

5.2. プロパティのアニメーション

特に指定がない限り、すべてのCSSプロパティはアニメーション可能です。 プロパティ値の合成方法は、各プロパティの定義テーブルにあるアニメーション型行によって定義されます：

アニメーション不可

このプロパティはアニメーション不可です。 アニメーションキーフレームにリストされても処理されず、 トランジションにも影響を受けません。

注: プロパティがアニメーションから除外される理由は、アニメーションすると過度に複雑になる場合が多いためです。 例えば、アニメーションパラメータを定義するプロパティはアニメーション不可ですが、 これは複雑な再帰動作を生むためです。

注: アニメーション効果がアニメーション不可なプロパティのみをターゲットにしていても、 アニメーション効果としての通常の動作（イベント発火やアニメーションの現行標準終了プロミスの履行遅延など）は保持されます。

離散

このプロパティ値は意味のある合成ができません。 したがって加法不可であり、補間は V_aからV_bへ50%（p=0.5）で切り替わります。 すなわち

$V_{\mathrm{result}}=\left\{\begin{array}{cc}{V}_{\mathrm{start}}\hfill & \text{if}p<0.5\hfill \\ V_{\mathrm{end}}\hfill & \text{if}p\ge 0.5\hfill \end{array}\right.$

算出値ごと

対応する個々の算出値成分を、 その値型に応じた手順（補間・加算・累積）で合成します （CSS Values 4 § 3 値の合成：補間、加算、累積参照）。 成分数や型が一致しない場合、 または任意の成分値が離散アニメーションであり、値が一致しない場合は、 プロパティ値は離散として合成されます。

繰り返し可能リスト

算出値ごとと同様ですが、 2つのリストのアイテム数が異なる場合は、最小公倍数まで繰り返してから合成します。 各アイテムは算出値ごとで合成されます。 合成できない値のペアや、任意の成分値が離散アニメーションの場合は、 プロパティ値は離散として合成されます。

注: 繰り返し可能リストの概念により、リストが概念的に指定長まで繰り返される場合 （background-originはbackground-imageリストの長さまで繰り返される） または無限に繰り返される場合でも、任意の値間でスムーズに遷移でき、 算出値が正しく結果を表し（継承も正しく行われる可能性があります）、となります。

(本文参照)

上記以外の特殊な補間動作を持つプロパティについては、個別にアニメーション動作が明示的に指定されます。

アニメーション型がプロパティ定義にまだ含まれていないプロパティのアニメーション型は、付録A：既存プロパティのアニメーション型で定義されています。

5.2.1. カスタムプロパティ

カスタムプロパティが、registerProperty()メソッドによって現在のグローバルオブジェクトに登録されている場合、 アニメーション型は、プロパティの算出値ごとであり、 プロパティの構文定義で使用される型から導出されます。 プロパティの指定された構文に対応する算出値型が存在しない場合 （例えば、構文がユニバーサル構文定義の場合）や、 カスタムプロパティが登録されていない場合は、 アニメーション型は離散となります。

5.3. キーフレーム効果

キーフレーム効果とは、タイミングモデルの出力を利用して、要素や疑似要素（::beforeや::afterなど[select]）のCSSプロパティを更新するアニメーション効果の一種であり、 これらは効果ターゲットと呼びます。

効果ターゲットは、 Elementであるターゲット要素と、疑似要素セレクターであるターゲット疑似セレクターから構成されます。 効果ターゲットがElementであれば、 ターゲット要素はその要素で、 ターゲット疑似セレクターはnullとなります。 効果ターゲットが疑似要素であれば、 ターゲット要素はその発生要素であり、 ターゲット疑似セレクターはその疑似要素を特定するために必要なものとなります。

この方法で指定されたすべての効果ターゲット（例えば::part()疑似要素や非対応疑似要素など）が算出プロパティ値を持つとは限らないことに注意してください。

5.3.1. キーフレーム

効果値はキーフレーム効果について、 分数オフセット位置に配置された一連のプロパティ値間を補間することで計算されます。 各オフセットでインデックス付けされたプロパティ値の集合をキーフレームと呼びます。

キーフレームのオフセットは[0, 1]の範囲にある値、もしくは特別な値nullです。 キーフレームのリストはキーフレーム効果ごとに オフセット順にゆるくソートされている必要があります。これは、nullでないキーフレームのオフセットを持つ各キーフレームについて、そのオフセットが直前のnullでないキーフレームのオフセット以上でなければならないことを意味します。

キーフレームが重複したり非対応値を持つ場合の動作は、§ 5.3.4 キーフレーム効果の効果値で定義されています。

各キーフレームには、指定されたキーフレームとリスト内の次のキーフレーム間の期間に適用されるタイミング関数が関連付けられています。 リスト内の最後のキーフレームに指定されたタイミング関数は決して適用されません。

各キーフレームは、キーフレーム固有合成操作を持つ場合があり、設定されていればそのキーフレームで指定されたすべての値に適用されます。 操作の種類と意味は、キーフレーム効果全体に関連付けられる合成操作と同じであり、§ 5.4.4 効果合成で定義されています。 キーフレーム固有合成操作が未設定の場合は、そのキーフレームに指定された値には合成操作が用いられます。

5.3.2. プロパティ値の算出

var animation = elem.animate([{ fontSize: '10px', width: '10em' },
                              { fontSize: '20px', width: '20em' }], 1000);
animation.currentTime = 500;
console.log(getComputedStyle(elem).fontSize); // Should be 15px
console.log(getComputedStyle(elem).width); // Should be 225px

5.3.3. 算出キーフレームの計算

キーフレーム効果の効果値を計算する前に、 そのキーフレーム上のプロパティ値は算出され、nullのキーフレームのオフセットには使用するオフセットが算出されます。この解決結果が算出キーフレームです。

適切な値が割り当てられたnullのキーフレームのオフセットを含むキーフレームの集合の算出キーフレームのオフセットは、算出キーフレームオフセットと呼びます。

算出キーフレームオフセットを生成するため、キーフレームの列keyframesを受け取る欠損キーフレームオフセットの算出手順を定義し、以下の手順を実行します：

1. keyframes内の各キーフレームについて、 そのキーフレームの算出キーフレームオフセットを、もとのキーフレームのオフセット値と同じにします。

2. keyframesに複数のキーフレームがあり、最初のキーフレームの算出キーフレームオフセットがnullの場合、 最初の算出キーフレームオフセットを0に設定します。

3. 最後のキーフレームの算出キーフレームオフセットがnullの場合、その算出キーフレームオフセットを1に設定します。

4. 各ペアのキーフレームAとBについて：

   • AがBよりkeyframes内で前に現れ、

   • AとBの算出キーフレームオフセットがnullでなく、

   • AとBの間にあるすべてのキーフレームの算出キーフレームオフセットがnullである場合、

   AとBの間にある各キーフレームの算出キーフレームオフセットを以下のように計算します：

   1. offset_kを、算出キーフレームオフセットのkの値とします。

   2. nを、AとBを含む間のキーフレーム数から1を引いた値とします。

   3. keyframeがAの直後ならindexは1、というように、A～B間のキーフレーム列におけるkeyframeの位置をindexとします。

   4. keyframeの算出キーフレームオフセットを offset_A + (offset_B − offset_A) × index / nとします。

算出キーフレームは以下の手順で生成します。 この手順は、算出プロパティ値が計算可能なキーフレーム効果の効果ターゲットにのみ実施されることに注意してください。

1. computed keyframesを空のキーフレームのリストとします。

2. このキーフレーム効果に指定されたキーフレームのリストの各keyframeについて、以下の手順を実行します：

   1. 新しい空のキーフレーム、computed keyframeをcomputed keyframesに追加します。

   2. keyframeで指定された各プロパティについて：

      • プロパティ値を算出するを、keyframeで指定された値をvalue、ターゲット要素をelementとして実行し、そのプロパティと結果値をcomputed keyframeに追加します。

      • ショートハンドプロパティの場合は、対応するロングハンドプロパティも追加します。

      • 論理プロパティ[CSS-LOGICAL-1]の場合は、 対応する物理プロパティ[CSS-WRITING-MODES-4]を、 writing-modeおよびdirectionの算出値に基づき、 効果ターゲットについて追加します。

      例えば、keyframeのborder-widthプロパティ値が"12pt"の場合、ユーザーエージェントは、ロングハンドプロパティであるborder-bottom-width、border-left-width、border-right-width、border-top-widthそれぞれについて"16px"の算出値を算出できます。 その結果、computed keyframeにはborder-widthの値は含まれず、 代わりに各ロングハンドプロパティとその値"16px"が含まれることとなります。

      ショートハンドプロパティの展開や論理プロパティの物理プロパティへの置換で競合が起きた場合は、以下のルールを順に適用し、解決します：

      1. ロングハンドプロパティはショートハンドプロパティより優先します（例：border-top-colorはborder-topより優先）。

      2. ロングハンド成分が少ないショートハンドプロパティは多いものより優先します（例：border-topはborder-colorより優先）。

      3. 物理プロパティは論理プロパティより優先します。

      4. ロングハンド成分数が同じショートハンドプロパティでは、IDL名（CSSプロパティからIDL属性へのアルゴリズム[CSSOM]）のUnicodeコードポイント順で早いものが優先されます。

3. 欠損キーフレームオフセットの算出手順をcomputed keyframesに適用します。

4. computed keyframesを返します。

5.3.4. キーフレーム効果の効果値

キーフレーム効果のターゲットプロパティとして参照される単一プロパティの効果値は、指定されたiteration progress、current iteration、underlying valueに対して次の手順で計算されます。

1. iteration progressが未解決なら、この手順を中止します。

2. target propertyを、効果値を計算するためのロングハンドプロパティとします。

3. target propertyのアニメーション型がアニメーション不可なら、この手順を中止します。効果は適用できません。

4. キーフレーム効果に効果ターゲットがない場合、 または効果ターゲットで算出プロパティ値が計算できない場合、この手順を中止します。

5. 合成の中立値を、基底値とaddの合成操作で合成したときに基底値を生成する値と定義します。

6. property-specific keyframesを、このキーフレーム効果に対する算出キーフレーム集合として取得します。

7. property-specific keyframesから、target propertyのプロパティ値がないキーフレームを除外します。

8. property-specific keyframesが空なら、underlying valueを返します。

9. property-specific keyframes内にキーフレームで算出キーフレームオフセットが0のものがなければ、 キーフレームを新規作成し、算出キーフレームオフセットを0、プロパティ値を合成の中立値、合成操作をaddとして、property-specific keyframesの先頭に追加します。

10. 同様に、property-specific keyframes内にキーフレームで算出キーフレームオフセットが1のものがなければ、 キーフレームを新規作成し、算出キーフレームオフセットを1、プロパティ値を合成の中立値、合成操作をaddとして、property-specific keyframesの末尾に追加します。

11. interval endpointsを空のキーフレーム列とします。

12. 以下の最初に一致した条件に従い、interval endpointsを決定します：

    iteration progress < 0 かつ キーフレームで算出キーフレームオフセット0が複数ある場合

    property-specific keyframesの最初のキーフレームをinterval endpointsに追加します。

    iteration progress ≥ 1 かつ キーフレームで算出キーフレームオフセット1が複数ある場合

    property-specific keyframesの最後のキーフレームをinterval endpointsに追加します。

    それ以外の場合

    1. interval endpointsに、iteration progress以下かつ1未満の算出キーフレームオフセットを持つproperty-specific keyframesの最後のキーフレームを追加します。該当がなければ（例えばiteration progressが負の場合）、算出キーフレームオフセットが0の最後のkeyframeを追加します。

    2. 前のステップで追加したkeyframeの次のproperty-specific keyframesをinterval endpointsに追加します。

13. interval endpoints内の各keyframeについて：

    1. keyframeの合成操作がreplace以外、またはkeyframeに合成操作がなく、このキーフレーム効果の合成操作がreplace以外の場合、以下を実行します：

       1. 使用するcomposite operationをkeyframeの合成操作、なければこのキーフレーム効果の合成操作とします。

       2. value to combineをkeyframeで指定されたtarget propertyのプロパティ値とします。

       3. target propertyのプロパティ値を、underlying value（V_a）とvalue to combine（V_b）をtarget propertyのアニメーション型に対応するcomposite operation to use手順で合成した値に置き換えます。

14. interval endpointsにキーフレームが1つだけなら、そのkeyframeのtarget propertyのプロパティ値を返します。

15. start offsetをinterval endpointsの最初のキーフレームの算出キーフレームオフセットとします。

16. end offsetをinterval endpointsの最後のキーフレームの算出キーフレームオフセットとします。

17. interval distanceを(iteration progress - start offset) / (end offset - start offset)で評価した結果とします。

18. transformed distanceを、interval endpointsの最初のキーフレームに関連付けられたタイミング関数にinterval distanceを入力進行度として渡して評価した結果とします。

19. interval endpointsの2つのキーフレームで指定されたtarget propertyの値を、最初の値をV_start、2つ目をV_endとし、transformed distanceを補間パラメータpとして、補間手順（target propertyのアニメーション型で定義）を適用した結果を返します。

注: この手順ではキーフレームの重複を許容します。 重複箇所では出力値はそのオフセットで定義された最後のキーフレームの値にジャンプします。 0や1で重複したキーフレームがある場合、iteration progress値が0未満または1以上の場合の出力値は、keyframesの最初のキーフレームまたは最後のキーフレームの値となります。

5.4. 効果の合成

この節は非規範的です

キーフレーム効果の効果値を計算した後、それらはアニメーション効果のターゲットプロパティに適用されます。

複数のin effectのキーフレーム効果が同じプロパティをターゲットにすることがあるため、複数のキーフレーム効果の結果を合成する必要があります。 このプロセスは合成と呼ばれ、各ターゲットプロパティごとに効果スタックを確立することに基づいています。

合成されたキーフレーム効果の結果は、ターゲットプロパティに指定された他の値と合成されます。

下図はその構成を示します：

この操作の前半（同じプロパティをターゲットにする効果値の合成）については、 どのようにキーフレーム効果同士を合成するか、 およびどの順序でそれらを適用するか（つまり相対的な合成順序）を決定する必要があります。

どのように効果値を合成するかは、対応するキーフレーム効果の合成操作によって決まります。

各アニメーションプロパティの合成順序は、効果スタックで決定されます。

5.4.1. アニメーションクラス

本仕様は、他の仕様がこのモデル上にマークアップやプログラミングインターフェースを定義する際に用いる共通アニメーションモデルを提供します。あるアニメーションを生成した特定のマークアップやプログラムインターフェースが、そのアニメーションクラスを定義します。

さらなる仕様では、異なるアニメーションクラス間や特定のクラス内で、合成順序に対する特殊な挙動を定義できます。

5.4.2. 効果スタック

各キーフレーム効果がターゲットとするプロパティターゲットプロパティごとに効果スタックが関連付けられます。 効果スタックは、キーフレーム効果の相対合成順序を確立します。

任意の2つのキーフレーム効果AとBの合成順序は、効果スタック内で以下のプロパティ比較により決定されます：

1. アニメーション効果の関連アニメーションを、アニメーションで、アニメーション効果に関連付けられているものとします。

2. AとBを、以下の条件を順に適用し順序が確定するまでソートします：

   1. AとBの関連アニメーションのクラスが異なる場合、対応クラス間で定義されたインタークラス合成順序でソートします。

   2. まだ順序が確定しなければ、共通クラス内で定義されたクラス固有の合成順序でソートします。

   3. まだ順序が確定しなければ、関連アニメーションのグローバルアニメーションリスト内の位置でソートします。

より早くソートされるアニメーション効果は、より低い合成順序を持ちます。

5.4.3. 効果スタックの結果の計算

効果スタックの最終値を計算するには、スタック内の各キーフレーム効果の効果値を合成順序で合成します。

効果スタックの評価プロセスの各ステップは、入力として基底値を受け取ります。

スタック内の各キーフレーム効果について、キーフレーム効果から適切な効果値を取得し、基底値と合成して新しい値を作ります。 この値は、次のキーフレーム効果との合成時の基底値となります。

効果スタックの最終値（合成値と呼ぶ）は、スタックの最後（最も高い合成順序）のキーフレーム効果の効果値とその時点の基底値を合成した結果です。

5.4.4. 効果の合成

効果値と基底値の合成に使われる具体的な操作は、効果値を生成したキーフレーム効果の合成操作によって決まります。

本仕様では、次の3つの合成操作を定義します：

replace

効果値と基底値を合成した結果は、単純に効果値です。

add

効果値を加算して基底値に合成します。 アニメーション型によっては、加算操作が可換でない場合があり、そのときの順序は 基底値 + 効果値です。

accumulate

効果値を累積して基底値に合成します。 アニメーション型によっては、累積操作が可換でない場合があり、そのときの順序は基底値、次に効果値です。

5.4.5. 合成結果の適用

合成値をターゲットプロパティに適用するには、指定値をCSSカスケードに追加します。

この指定値がカスケードに追加されるレベルは、効果スタック内で最も高い合成順序の効果が関連付けられているアニメーションのクラスによって決まります。 デフォルトでは、指定値はカスケードの「アニメーション宣言」レベルに追加されます（[css-cascade-3]）。

CSSのターゲットプロパティに対して計算された合成値は、次の手順で適用されます。

1. プロパティのbase valueを、アニメーションがない場合にそのプロパティの算出値を計算した結果値とします。

2. プロパティの効果スタックを確立します（§ 5.4.2 効果スタック参照）。

3. プロパティのbase valueを初期基底値として効果スタックの合成値を計算します（§ 5.4.3 効果スタックの結果の計算参照）。

4. 確立されたターゲットプロパティの効果スタックの先頭の効果に関連付けられているアニメーションのクラスで定義されたレベルに合成値をCSSカスケードに挿入します。

5.5. アニメーションの置換

elem.addEventListener('mousemove', evt => {
  circle.animate(
    { transform: `translate(${evt.clientX}px, ${evt.clientY}px)` },
    { duration: 500, fill: 'forwards' }
  );
});

5.5.1. 置換状態

アニメーションは、次の値のいずれかを持つ置換状態を保持します：

• active（アクティブ）

• removed（削除済）

• persisted（保持）

アニメーションの置換状態の初期値はactiveです。

アニメーションの置換状態がremovedの場合、そのアニメーション効果はターゲットプロパティの効果スタックに含まれません。

5.5.2. 置換されたアニメーションの削除

すべての次の条件を満たす場合、アニメーションは置換可能です：

• アニメーションの存在がマークアップによって規定されていないこと。 すなわち、CSSアニメーションの所有要素でもなく、 CSSトランジションの所有要素でもないこと。

• アニメーションの再生状態がfinishedであること。

• アニメーションの置換状態がremovedでないこと。

• アニメーションが単調増加のタイムラインに関連付けられていること。

• アニメーションが関連効果を持つこと。

• アニメーションの関連効果がin effectであること。

• アニメーションの関連効果が効果ターゲットを持つこと。

Document docの置換されたアニメーションの削除を求められた場合、すべてのアニメーションanimationについて、下記の条件を満たすものに対して：

• 関連付けられたアニメーション効果があり、その効果ターゲットがdocの子孫であること、

• 置換可能であること、

• 置換状態がactiveであること、

• 全てのアニメーション効果のターゲットプロパティごとに、同じターゲットプロパティを含む、より高い合成順序を持つ置換可能なアニメーションのアニメーション効果が存在すること、

以下の手順を実行します：

1. animationの置換状態をremovedに設定します。

2. イベントを生成し、AnimationPlaybackEvent removeEventとします。

3. removeEventのtype属性をremoveに設定します。

4. removeEventのcurrentTime属性を、animationの現在時刻に設定します。

5. removeEventのtimelineTime属性を、animationが関連付けられているタイムラインの現在時刻に設定します。

6. animationがタイミング用ドキュメントを持つ場合は、removeEventをそのタイミング用ドキュメントの保留アニメーションイベントキューに、ターゲットanimationとともに追加します。 イベント予定時刻には、animationが関連付けられているタイムラインの現在時刻にタイムライン時刻を原点相対時刻へ変換手順を適用した結果を使用します。

   それ以外の場合は、タスクをキューし、removeEventをanimationでdispatchします。 このタスクのタスクソースはDOM操作タスクソースです。

5.6. アニメーションの副作用

少なくとも1つのアニメーション効果によってターゲットとされ、かつcurrentまたはin effectであり、 そのアニメーションの置換状態がremovedでないすべてのプロパティについて、 ユーザーエージェントはwill-changeプロパティ（[css-will-change-1]）が効果ターゲット上でそのプロパティを含んでいるかのように振る舞わなければなりません。

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

6.1. プログラミングインターフェースにおける時間値

時間値はプログラミングインターフェースでは double型で表されます。未解決の時間値は null値で表現されます。

6.2. AnimationTimelineインターフェース

タイムラインは、Web Animations APIではAnimationTimeline インターフェースで表現されます。

[Exposed=Window]
interface AnimationTimeline {
    readonly attribute double? currentTime;
};

6.3. DocumentTimelineインターフェース

ドキュメントタイムライン（デフォルトドキュメントタイムラインを含む）は、Web Animations APIではDocumentTimeline インターフェースで表現されます。

dictionary DocumentTimelineOptions {
  DOMHighResTimeStamp originTime = 0;
};

[Exposed=Window]
interface DocumentTimeline : AnimationTimeline {
  constructor(optional DocumentTimelineOptions options = {});
};

6.4. Animationインターフェース

アニメーションは Web Animations APIではAnimation インターフェースで表現されます。

[Exposed=Window]
interface Animation : EventTarget {
    constructor(optional AnimationEffect? effect = null,
                optional AnimationTimeline? timeline);
             attribute DOMString                id;
             attribute AnimationEffect?         effect;
             attribute AnimationTimeline?       timeline;
             attribute double?                  startTime;
             attribute double?                  currentTime;
             attribute double                   playbackRate;
    readonly attribute AnimationPlayState       playState;
    readonly attribute AnimationReplaceState    replaceState;
    readonly attribute boolean                  pending;
    readonly attribute Promise<Animation>       ready;
    readonly attribute Promise<Animation>       finished;
             attribute EventHandler             onfinish;
             attribute EventHandler             oncancel;
             attribute EventHandler             onremove;
    undefined cancel();
    undefined finish();
    undefined play();
    undefined pause();
    undefined updatePlaybackRate(double playbackRate);
    undefined reverse();
    undefined persist();
    [CEReactions]
    undefined commitStyles();
};

算出スタイルをコミットするには、アニメーションanimationについて：

1. targetsを、animationに関連付けられているすべてのアニメーション効果の効果ターゲットのセットとする。

2. 各targetについて：

   1. targetがstyle属性を持つことができる要素でない場合（例：疑似要素や、style属性が定義されていない文書形式の要素）、throwし、「NoModificationAllowedError」DOMExceptionを発生させ、これらの手順を中止する。

   2. 保留中のスタイル変更を適用した後、targetが描画されていない場合、throwし、「InvalidStateError」DOMExceptionを発生させ、これらの手順を中止する。

      描画されているの定義は、display: contentsとの関係でまだ議論中です。 この手順の目的では、display: contentsであっても、他にレイアウトボックスが関連付けられる（接続済みで、display: noneのサブツリーでない）場合は描画されているとみなします。

   3. inline styleを、targetのCSS宣言ブロック（style属性に対応）取得結果とします。 targetがstyle属性を持たない場合は、inline styleを新しい空のCSS宣言ブロック（オーナーノードはtarget）とします。

   4. targeted propertiesを、animationに関連付けられているすべてのアニメーション効果のうち、targetを効果ターゲットとするものの、物理ロングハンドプロパティのターゲットプロパティのセットとする。

   5. 各プロパティpropertyについて：

      1. partialEffectStackをtarget上のpropertyの効果スタックのコピーとします。

      2. animationの置換状態がremovedなら、animationに関連付けられているすべてのアニメーション効果のうち、targetを効果ターゲットとし、propertyをターゲットプロパティに含むものをpartialEffectStackに追加します。

      3. partialEffectStackから、animationより高い合成順序を持つアニメーションに関連付けられているアニメーション効果を削除します。

      4. effect valueを、partialEffectStackについてpropertyの結果を計算し（targetの算出スタイルを使用）、その結果とします（§ 5.4.3 効果スタックの結果の計算参照）。

      5. CSS宣言を設定するで、propertyにeffect valueをinline styleに設定します。

   6. style属性を更新するでinline styleを更新します。

6.4.1. AnimationPlayState列挙型

enum AnimationPlayState { "idle", "running", "paused", "finished" };

idle

アイドル再生状態に対応します。

running

再生中状態に対応します。

paused

一時停止状態に対応します。

finished

終了状態に対応します。

6.4.2. AnimationReplaceState列挙型

enum AnimationReplaceState { "active", "removed", "persisted" };

active

アクティブ置換状態に対応します。

removed

削除済み置換状態に対応します。

persisted

保持置換状態に対応します。

6.5. AnimationEffectインターフェース

アニメーション効果は Web Animations APIでは抽象AnimationEffect インターフェースで表現されます。

[Exposed=Window]
interface AnimationEffect {
    EffectTiming         getTiming();
    ComputedEffectTiming getComputedTiming();
    undefined            updateTiming(optional OptionalEffectTiming timing = {});
};

remove()メソッドは、効果を親グループやアニメーションから除去するために使える。現行標準レベル1に残し、単にアニメーションからアニメーション効果を除去するものとして定義すべきか？ [Issue #2082]

6.5.1. EffectTimingおよびOptionalEffectTiming辞書

EffectTiming 辞書は、AnimationEffect のタイミングプロパティを表します。

OptionalEffectTiming 辞書は、EffectTiming 辞書のバリエーションで、一部のメンバーが存在しないことを許容します。 これはupdateTiming() メソッドで、AnimationEffect インターフェースのタイミングプロパティをデルタ更新する際に使用されます。 アニメーション効果のタイミングプロパティの差分更新に用います。

dictionary EffectTiming {
    double                             delay = 0;
    double                             endDelay = 0;
    FillMode                           fill = "auto";
    double                             iterationStart = 0.0;
    unrestricted double                iterations = 1.0;
    (unrestricted double or DOMString) duration = "auto";
    PlaybackDirection                  direction = "normal";
    DOMString                          easing = "linear";
};

dictionary OptionalEffectTiming {
    double                             delay;
    double                             endDelay;
    FillMode                           fill;
    double                             iterationStart;
    unrestricted double                iterations;
    (unrestricted double or DOMString) duration;
    PlaybackDirection                  direction;
    DOMString                          easing;
};

6.5.2. FillMode列挙型

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

none

塗りなし。

forwards

前方塗り。

backwards

後方塗り。

both

前方・後方両方塗り。

auto

塗りなし。 今後の現行標準レベルで他種類のアニメーション効果に対して異なる動作になる場合があります。

6.5.3. PlaybackDirection列挙型

enum PlaybackDirection { "normal", "reverse", "alternate", "alternate-reverse" };

normal

すべての反復は指定通りに再生されます。

reverse

すべての反復は指定された順序と逆方向に再生されます。

alternate

偶数回の反復は指定通り、奇数回の反復は逆方向に再生されます。

alternate-reverse

偶数回の反復は逆方向、奇数回の反復は指定通りに再生されます。

6.5.4. AnimationEffectのタイミングの更新

アニメーション効果のタイミングプロパティを更新するには、effectに対して、 EffectTiming またはOptionalEffectTiming オブジェクトinputを使い、以下の手順を実行します：

1. inputのiterationStart メンバーが存在し、0未満の場合は、TypeErrorをthrowして、この手順を中止します。

   注: TypeErrorを使う理由は、将来的にWebIDLの[EnforceRange]アノテーションが浮動小数点値にも適用できるようになった場合に、挙動を合わせるためです。

2. inputのiterations メンバーが存在し、 かつ0未満またはNaNの場合は、TypeErrorをthrowして、この手順を中止します。

3. inputのduration メンバーが存在し、 かつ0未満またはNaNの場合は、TypeErrorをthrowして、この手順を中止します。

4. inputのeasing メンバーが存在し、かつ<easing-function> 生成規則でパースできない場合は、TypeErrorをthrowして、この手順を中止します。

5. inputで存在する各メンバーを、以下の対応でeffectのタイミングプロパティに割り当てます：

   • delay → 開始遅延

   • endDelay → 終了遅延

   • fill → 塗りモード

   • iterationStart → 反復開始

   • iterations → 反復回数

   • duration → 反復期間

   • direction → 再生方向

   • easing → タイミング関数

6.5.5. ComputedEffectTiming辞書

タイミングモデルで計算されたタイミングプロパティはComputedEffectTiming 辞書オブジェクトで公開されます。

dictionary ComputedEffectTiming : EffectTiming {
    unrestricted double  endTime;
    unrestricted double  activeDuration;
    double?              localTime;
    double?              progress;
    unrestricted double? currentIteration;
};

6.6. KeyframeEffectインターフェース

キーフレーム効果は KeyframeEffect インターフェースで表現されます。

[Exposed=Window]
interface KeyframeEffect : AnimationEffect {
    constructor(Element? target,
                object? keyframes,
                optional (unrestricted double or KeyframeEffectOptions) options = {});
    constructor(KeyframeEffect source);
    attribute Element?           target;
    attribute CSSOMString?       pseudoElement;
    attribute CompositeOperation composite;
    sequence<object> getKeyframes();
    undefined        setKeyframes(object? keyframes);
};

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

var effect = new KeyframeEffect(elem, { left: '100px' }, 3000);

// 複数のプロパティを同時に指定
var effectA = new KeyframeEffect(elem, { left: '100px', top: '300px' }, 3000);

// 複数のキーフレームを指定
var effectB = new KeyframeEffect(elem, [ { left: '100px' }, { left: '300px' } ], 3000);

var effect =
  new KeyframeEffect(elem, { left: '100px' }, { duration: 3000, delay: 2000 });

var effect =
  new KeyframeEffect(elem, { visibility: 'hidden' }, { fill: 'forwards' });

elem.animate({ left: '100px' }, 3000);

6.6.2. プロパティ名とIDL名

アニメーションプロパティ名からIDL属性名への変換 アルゴリズム（property用）は以下の通りです：

1. propertyがに従う場合、 propertyを返す。

2. propertyがCSSのfloat プロパティの場合、 文字列"cssFloat"を返す。

3. propertyがCSSのoffset プロパティの場合、 文字列"cssOffset"を返す。

4. それ以外の場合、propertyにCSSプロパティからIDL属性への変換アルゴリズム（[CSSOM]）を適用した結果を返す。

IDL属性名からアニメーションプロパティ名への変換 アルゴリズム（attribute用）は以下の通りです：

1. attributeがに従う場合、 attributeを返す。

2. attributeが文字列"cssFloat"の場合、CSSのfloatプロパティを表すアニメーションプロパティを返す。

3. attributeが文字列"cssOffset"の場合、CSSのoffsetプロパティを表すアニメーションプロパティを返す。

4. それ以外の場合、attributeにIDL属性からCSSプロパティへの変換アルゴリズム（[CSSOM]）を適用した結果を返す。

6.6.3. keyframes引数の処理

// 下記2つの式は同じ結果になります：
elem.animate([ { color: 'blue' },
               { color: 'green' },
               { color: 'red' },
               { color: 'yellow' } ], 2000);
elem.animate({ color: [ 'blue', 'green', 'red', 'yellow' ] }, 2000);

// 複数プロパティアニメーションの場合も、下記2つの式は等価です：
elem.animate([ { color: 'blue', left: '0px' },
               { color: 'green', left: '-20px' },
               { color: 'red', left: '100px' },
               { color: 'yellow', left: '50px'} ], 2000);
elem.animate({ color: [ 'blue', 'green', 'red', 'yellow' ],
               left: [ '0px', '-20px', '100px', '50px' ] }, 2000);

// ちなみに、下記3つの式はすべて等価です：
elem.animate([ { color: 'red' } ], 1000);
elem.animate({ color: [ 'red' ] }, 1000);
elem.animate({ color: 'red' }, 1000);

// オフセットを指定しない場合、自動的に最初のキーフレームは0、中間は0.65、最後は1となります。
//
elem.animate([ { color: 'blue' },
               { color: 'green', offset: 0.5 },
               { color: 'red' },
               { color: 'yellow', offset: 0.8 },
               { color: 'pink' } ], 2000);

// 下記も同じ結果になります。最後の値は指定不要で、自動的に'null'扱いとなり、上記と同様に自動割り当てされます。
elem.animate({ color: [ 'blue', 'green', 'red', 'yellow', 'pink' ],
               offset: [ null, 0.5, null, 0.8 ] }, 2000);

// タイミング関数はキーフレーム間に適用されるため、最後のキーフレームに指定しても無視されます。
elem.animate([ { color: 'blue', easing: 'ease-in' },
               { color: 'green', easing: 'ease-out' },
               { color: 'yellow' } ], 2000);

// 下記も同じ結果になります。
elem.animate({ color: [ 'blue', 'green', 'yellow' ],
               easing: [ 'ease-in', 'ease-out' ] }, 2000);

// 繰り返し動作を使えば、全キーフレームに同じ値を割り当てるのも簡単です：
elem.animate({ color: [ 'blue', 'green', 'yellow' ],
               easing: 'ease-in-out' }, 2000);

// ここでは 'ease-in-out' が各色値の間に適用されます。
elem.animate({ color: [ 'blue', 'green', 'yellow' ],
               easing: 'ease-in-out' }, 2000);

// 一方、こちらは 'ease-in-out' がアニメーション全体（'blue'から'yellow'まで）に適用されます。
elem.animate({ color: [ 'blue', 'green', 'yellow' ] },
             { duration: 2000, easing: 'ease-in-out' });

dictionary Keyframe {
    // ... プロパティ値のペア ...
    // 例：DOMString propertyName
    double?                   offset = null;
    DOMString                 easing = "linear";
    CompositeOperationOrAuto  composite = "auto";
};

dictionary PropertyIndexedKeyframes {
    // ... プロパティ値や値リストのペア ...
    // 例：(DOMString or sequence<DOMString>) propertyName
    (double? or sequence<double?>)                         offset = [];
    (DOMString or sequence<DOMString>)                     easing = [];
    (CompositeOperationOrAuto or sequence<CompositeOperationOrAuto>) composite = [];
};

typedef (sequence<Keyframe> or PropertyIndexedKeyframes) KeyframeArgument;

各メソッドでkeyframes引数を受け取る場合、keyframes引数の処理手順を入力に実行し、その結果を保持します。

まず2つの補助的定義を示します。

completion recordの確認（result）は、resultがECMAScript操作のcompletion recordである場合、以下の手順と同等です：

1. resultがabrupt completionなら、resultの[[value]]フィールドに含まれる例外をthrowしてこの手順を中止します。

   [[type]]がbreak、continue、returnの場合はどうすべき？あり得る？

2. resultをresultの[[value]]フィールドの値で置き換えます。

キーフレーム類似オブジェクトの処理手順は、2つの引数を取ります：

• ECMAScriptオブジェクトkeyframe input

• boolean値allow lists

そして、以下の手順でallow listsがfalseならプロパティ名→DOMString値のマップ、trueならプロパティ名→DOMString値列のマップを返します：

1. keyframe inputをECMAScript値から辞書型への変換手順（[WEBIDL]）に渡して実行します。辞書型はallow listsの値で次のように決まります：

   trueのとき

   以下の辞書型：

   dictionary BasePropertyIndexedKeyframe {
       (double? or sequence<double?>)                         offset = [];
       (DOMString or sequence<DOMString>)                     easing = [];
       (CompositeOperationOrAuto or sequence<CompositeOperationOrAuto>) composite = [];
   };
   

   falseのとき

   以下の辞書型：

   dictionary BaseKeyframe {
       double?                  offset = null;
       DOMString                easing = "linear";
       CompositeOperationOrAuto composite = "auto";
   };
   

   この手順の結果をkeyframe outputとして保持します。

2. animatable propertiesリストを以下の手順で作成します：

   1. animatable propertiesを、実装でアニメーション可能なプロパティ名（ロングハンドを持つショートハンドも含む）リストとする。

   2. animatable properties内の各プロパティ名をアニメーションプロパティ名からIDL属性名への変換アルゴリズムでIDL属性名に変換する。

3. input propertiesを、keyframe inputに対してEnumerableOwnNames操作で取得する。

4. animation properties新リストを作成し、input propertiesとanimatable properties両方に含まれるプロパティ、またはinput propertiesにありに従うものを含める。

5. animation propertiesをUnicodeコードポイント順で昇順ソートする。

6. animation properties内の各property nameについて：

   1. raw valueを、keyframe inputに対して[[Get]]で取得する。

   2. raw valueのcompletion recordの確認を行う。

   3. raw valueをDOMStringまたはDOMString列property valuesへ変換：

      allow listsがtrueの場合

      property valuesをraw valueからIDL型(DOMString or sequence<DOMString>)にECMAScript値からIDL値への変換手順（[WEBIDL]）で変換する。

      単一DOMStringの場合、値1件のDOMString列に置き換える。

      それ以外

      property valuesをraw valueからDOMStringにECMAScript値からDOMStringへの変換手順（[WEBIDL]）で変換する。

   4. normalized property nameを、property nameにIDL属性名からアニメーションプロパティ名への変換アルゴリズム適用結果とする。

   5. keyframe outputにnormalized property nameのプロパティでproperty valuesを値として追加する。

7. keyframe outputを返す。

keyframes引数の処理手順は、nullableなECMAScriptオブジェクトobjectを入力に、以下でキーフレーム列を返します：

1. objectがnullなら、空のキーフレーム列を返す。

2. processed keyframesを空のキーフレーム列とする。

3. methodをGetMethod(object, @@iterator)で取得する。

4. methodのcompletion recordの確認を行う。

5. 以下の最初に一致する条件に対応する手順を実行する：

   methodがundefinedでない場合

   1. iterをGetIterator(object, method)で取得。

   2. iterのcompletion recordの確認を行う。

   3. 繰り返し：

      1. nextをIteratorStep(iter)で取得。

      2. nextのcompletion recordの確認を行う。

      3. nextがfalseならこのループを中止する。

      4. nextItemをIteratorValue(next)で取得。

      5. nextItemのcompletion recordの確認を行う。

      6. Type(nextItem)がUndefined, Null, Object以外なら、TypeErrorをthrowして以降を中止する。

      7. キーフレーム類似オブジェクトの処理手順をnextItemに対しallow lists = falseで実行し、その結果をprocessed keyframesに追加する。

   それ以外

   1. property-indexed keyframeをキーフレーム類似オブジェクトの処理手順でobjectにallow lists = trueで実行した結果とする。

   2. property-indexed keyframeの各メンバーmについて：

      1. キーをproperty nameとする。

      2. property nameが"composite"、"easing"、"offset"ならこのループの残りをスキップし次へ。

      3. 値をproperty valuesとする。

      4. property keyframesを空のキーフレーム列とする。

      5. property values内の各値vについて：

         1. kをキーフレームで、キーフレームオフセットがnullなものとして新規作成。

         2. property name→vのプロパティ値ペアをkに追加。

         3. kをproperty keyframesに追加。

      6. 欠損キーフレームオフセットの算出手順をproperty keyframesに適用。

      7. property keyframes内のキーフレームをprocessed keyframesに追加。

   3. processed keyframesを各キーフレームの算出キーフレームオフセットで昇順ソート。

   4. processed keyframesで隣接するキーフレームの算出キーフレームオフセットが等しい場合は統合。

   5. offsetsを、property-indexed keyframeの"offset"メンバー型により次のように設定：

      sequence<double?>の場合

      "offset"そのもの。

      double?の場合

      長さ1のシーケンスで、値は"offset"のみ（« offset »）。

   6. offsetsの各値を、processed keyframesで対応する位置のキーフレームオフセットに割り当てる。どちらかの末尾まで。

   7. easingsを、property-indexed keyframeの"easing"メンバー型により次のように設定：

      sequence<DOMString>の場合

      "easing"そのもの。

      DOMStringの場合

      長さ1のシーケンスで、値は"easing"のみ（« "easing" »）。

   8. easingsが空なら、長さ1で値"linear"（« "linear" »）にする。

   9. easingsがprocessed keyframesより少なければ、先頭から繰り返して同数にする。

      例えば、processed keyframesが5件、easingsが« "ease-in", "ease-out" »なら、easingsは« "ease-in", "ease-out", "ease-in", "ease-out", "ease-in" »になります。

   10. easingsがprocessed keyframesより多ければ、余剰分をunused easingsとして保持。

   11. easingsの各値を、対応する位置のキーフレームの"easing"プロパティに割り当てる。

   12. property-indexed keyframeの"composite"メンバーが空でない場合：

       1. composite modesを"composite"メンバーからCompositeOperationOrAuto値のシーケンスとして作成。単一値なら長さ1でその値のみ。

       2. composite modesがprocessed keyframesより少なければ、先頭から繰り返して同数にする。

       3. auto以外の値を、対応する位置のキーフレーム固有の合成操作に割り当てる。

6. processed keyframesがオフセットでゆるくソートされていなければ、TypeErrorをthrowして以降を中止する。

7. processed keyframes内でキーフレームのキーフレームオフセットが非nullかつ0未満または1超過があれば、TypeErrorをthrowして以降を中止する。

8. processed keyframes内の各frameについて：

   1. 各プロパティ値ペアについて、プロパティで定められた構文で値をパースする。

      構文的に無効ならペアを破棄。診断機能を持つユーザーエージェントは適切な警告を出すことが推奨される。

   2. frameのタイミング関数を、frameの"easing"プロパティをCSS構文（easingメンバー、EffectTiming辞書で定義）でパースした結果とする。

      パース失敗ならTypeErrorをthrowしてこの手順を中止する。

      注: 上記2手順でCSSパーサーを使うため、CSSコメントやエスケープは許容されるが、パース成功時は値に保持されない。

      注: "easing"プロパティのパース失敗時は、objectから全プロパティを読み終えた後に必ずTypeErrorをthrowすること。そうしないと挙動がobservableになり、将来WebIDLで部分的にオープンな辞書型がサポートされた場合と一致しなくなる。

9. unused easings内の各値を、easingメンバー（EffectTimingインターフェース）で定義されたCSS構文でパースし、失敗したらTypeErrorをthrowしてこの手順を中止する。

   この最終ステップは、次のすべてのケースで一貫した挙動（TypeErrorがthrowされる）を保証するために必要です：

   elem.animate({ easing: 'invalid' });
   elem.animate({ easing: ['invalid'] });
   elem.animate([{ easing: 'invalid' }]);
   

6.6.4. KeyframeEffectOptions辞書

KeyframeEffect(target, keyframes, options) コンストラクタに追加パラメータとして KeyframeEffectOptions オブジェクトを渡すことができます。

dictionary KeyframeEffectOptions : EffectTiming {
    CompositeOperation composite = "replace";
    CSSOMString?       pseudoElement = null;
};

6.7. CompositeOperationおよびCompositeOperationOrAuto列挙型

キーフレーム効果の合成動作の値はCompositeOperation列挙型で表されます。

enum CompositeOperation { "replace", "add", "accumulate" };

replace

replace合成操作に対応し、アニメーション効果は基底値を上書きします。

add

add合成操作に対応し、アニメーション効果は加算で基底値と合成されます。

accumulate

accumulate合成操作に対応し、アニメーション効果は累積で基底値と合成されます。

キーフレームの合成動作で使える値はCompositeOperation 列挙型値に加え、autoが追加されます。

enum CompositeOperationOrAuto { "replace", "add", "accumulate", "auto" };

auto

関連付けられたキーフレーム効果の合成操作を使用することを示します。

6.8. Animatableインターフェースミックスイン

KeyframeEffect オブジェクトのターゲットとなる可能性があるオブジェクトは、 Animatable インターフェースミックスインを実装します。

interface mixin Animatable {
    Animation           animate(object? keyframes,
                                optional (unrestricted double or KeyframeAnimationOptions) options = {});
    sequence<Animation> getAnimations(optional GetAnimationsOptions options = {});
};

dictionary KeyframeAnimationOptions : KeyframeEffectOptions {
    DOMString id = "";
    AnimationTimeline? timeline;
};

dictionary GetAnimationsOptions {
    boolean subtree = false;
};