Web Animations — Programming interface

6.1. ~APIにおける時刻~値

~APIにおいては、 `時刻~値$は `double?^I 型で表現される。 値 ~NULL が時刻~値`未解決$を表現する。 【すなわち、未解決は ~NULL の別名。】 ◎ Time values are represented in the programming interface with the type double. Unresolved time values are represented by the value null.

6.2. `AnimationTimeline^I ~interface

`時列線$は、 ~WAnim~APIにおいては `AnimationTimeline$I ~interfaceで表現される。 ◎ Timelines are represented in the Web Animations API by the AnimationTimeline interface.

[`Exposed$=Window]
interface `AnimationTimeline@I {
  readonly attribute `double$? `currentTime$m;
};

`currentTime@m ◎ currentTime, of type double, readonly, nullable

取得子~手続きは ⇒ ~RET ［ コレは`作動中$でないならば ~NULL ／ ~ELSE_ コレの`現-時刻$tL ］ ◎ Returns the current time for this timeline or null if this timeline is inactive.

6.3. `DocumentTimeline^I ~interface

~WAnim~APIにおいては、 `文書~時列線$は — `既定の文書~時列線$も含め — `DocumentTimeline$I ~interfaceで表現される。 ◎ Document timelines, including the default document timeline, are represented in the Web Animations API by the DocumentTimeline interface.

dictionary `DocumentTimelineOptions@I {
  `DOMHighResTimeStamp$I `originTime$m = 0;
};

[`Exposed$=Window]
interface `DocumentTimeline@I : `AnimationTimeline$I {
  `DocumentTimeline$mc(optional `DocumentTimelineOptions$I %options = {});
};

`DocumentTimelineOptions^II`originTime@m1 ◎ originTime, of type DOMHighResTimeStamp, defaulting to 0

時列線~用の`起点~時刻$を，`時刻~起点$enVに相対的な~milli-秒による実数-として指定する。 ◎ The origin time for the timeline specified as a real number of milliseconds relative to the time origin.

`DocumentTimeline(options)@m0 ◎ DocumentTimeline (options)

構築子~手続きは ⇒ コレが表現する`文書~時列線$の ⇒＃ `属する文書$ ~SET `現在の大域~obj$（ `Window$I ）に`結付けられた文書$, `起点~時刻$ ~SET %options[ `DocumentTimelineOptions^II"`originTime$m1" ] ◎ Creates a new DocumentTimeline. The Document with which the timeline is associated is the Document associated with the Window that is the current global object.

%options 引数は、 新たに作成される時列線~用の環境設定~parameter群を与える。 この仕様は `originTime$m1 ~memberのみを定義するが、 他の仕様は，この集合を拡張してもヨイ。 ◎ Configuration parameters for the newly-created timeline. This specification defines only the originTime member but other specifications may extend this set.

6.4. `Animation^I ~interface

`~animation$は、 ~WAnim~APIにおいては `Animation$I ~interfaceで表現される。 ◎ Animations are represented in the Web Animations API by the Animation interface.

[`Exposed$=Window]
interface `Animation@I : `EventTarget$I {
  `Animation$mc(optional `AnimationEffect$I? %effect = null, optional `AnimationTimeline$I? %timeline);

           attribute `DOMString$                `id$m;
           attribute `AnimationEffect$I?         `effect$m;
           attribute `AnimationTimeline$I?       `timeline$m;
           attribute `double$?                  `startTime$m;
           attribute `double$?                  `currentTime$m;
           attribute `double$                   `playbackRate$m;
  readonly attribute `AnimationPlayState$I       `playState$m;
  readonly attribute `AnimationReplaceState$I    `replaceState$m;
  readonly attribute `boolean$                  `pending$m;
  readonly attribute `Promise$<`Animation$I>       `ready$m;
  readonly attribute `Promise$<`Animation$I>       `finished$m;
           attribute `EventHandler$I             `onfinish$m;
           attribute `EventHandler$I             `oncancel$m;
           attribute `EventHandler$I             `onremove$m;
  `undefined$ `cancel$m();
  `undefined$ `finish$m();
  `undefined$ `play$m();
  `undefined$ `pause$m();
  `undefined$ `updatePlaybackRate$m(`double$ %playbackRate);
  `undefined$ `reverse$m();
  `undefined$ `persist$m();
  [`CEReactions$] `undefined$ `commitStyles$m();
};

`Animation(effect, timeline)@m0

構築子~手続きは： ◎ Creates a new Animation object using the following procedure: • Let animation be a new Animation object.

1. ~IF［ %timeline ~EQ ε ］ ⇒ %timeline ~SET `現在の大域~obj$（ `Window$I ）に`結付けられた文書$の`既定の文書~時列線$ ◎ ↓
2. `時列線を設定する$( コレ, %timeline ) ◎ Run the procedure to set the timeline of an animation on animation passing timeline as the new timeline; or, if the timeline argument is missing, passing the default document timeline of the Document associated with the Window that is the current global object.
3. `結付けられる効果を設定する$( コレ, %effect ) ◎ Run the procedure to set the associated effect of an animation on animation passing source as the new effect.

%effect 引数（省略可能）は、 ~NULL でないならば， 新たに作成する`~animation$に`結付けられた効果$としてアテガうものを指定する。 ◎ effect • An optional value which, if not null, specifies the associated effect to assign to the newly created animation.

%timeline 引数（省略可能）は、 新たに作成される`~animation$に結付ける`時列線$を指定する。 与えられていない場合、 `現在の大域~obj$（ `Window$I ）に`結付けられた文書$の`既定の文書~時列線$が利用される。 ◎ timeline • An optional value which, if present, specifies the timeline with which to associate the newly-created animation. If missing, the default document timeline of the Document associated with the Window that is the current global object is used.

`id@m ◎ id, of type DOMString

この~animationを識別するために利用される文字列。 ◎ A string used to identify the animation.

【 取得子は、 最後に設定された値を返す。 設定子は、 この属性を所与の値に設定する （その名に反し、一意性は要求されていない）。 初期~時は、 （他の値で初期化されない限り）空~文字列にされる。 】

`effect@m ◎ effect, of type AnimationEffect, nullable

取得子~手続きは ⇒ ~RET コレに`結付けられた効果$ ◎ The associated effect of this animation.＼

設定して，この~animationに`結付けられた効果$を更新できる。 ◎ Setting this attribute updates the object’s associated effect＼

設定子~手続きは ⇒ `結付けられる効果を設定する$( コレ, 所与の値 ) ◎ using the procedure to set the associated effect of an animation.

`timeline@m ◎ timeline, of type AnimationTimeline, nullable

取得子~手続きは ⇒ ~RET コレの`時列線$An ◎ The timeline associated with this animation.

設定子~手続きは ⇒ `時列線を設定する$( コレ, 所与の値 ) ◎ Setting this attribute updates the object’s timeline using the procedure to set the timeline of an animation.

`startTime@m ◎ startTime, of type double, nullable

取得子~手続きは ⇒ ~RET コレの`開始-時刻$ ◎ Returns the start time of this animation.＼

設定して，この~animationの`開始-時刻$を新たな値に更新できる。 ◎ Setting this attribute updates the start time＼

設定子~手続きは ⇒ `開始-時刻を設定する$( コレ ) ◎ using the procedure to set the start time of this object to the new value.

`currentTime@m ◎ currentTime, of type double, nullable

取得子~手続きは ⇒ ~RET コレの`現-時刻$ ◎ The current time of this animation.＼

設定して，この~animationの`現-時刻$を変更できる。 ◎ ↓

設定子~手続きは ⇒ `現-時刻を設定する$( コレ, 所与の値 ) ◎ Setting this attribute follows the procedure to set the current time of this object to the new value.

`playbackRate@m ◎ playbackRate, of type double

取得子~手続きは ⇒ ~RET コレの`再生~rate$ ◎ The playback rate of this animation.＼

設定して，この~animationの`再生~rate$を変更できる。 ◎ ↓

設定子~手続きは ⇒ `再生~rateを設定する$( コレ, 所与の値 ) ◎ Setting this attribute follows the procedure to set the playback rate of this object to the new value.

注記： この属性を設定すれば、 `再生~rate$の同期的な更新を遂行できる。 すなわち、［ 別々な~thread等で走らせている~animationの再生~状態 ］と同期しようと試みることはない。 したがって、 ~animationが再生中の間に `playbackRate$m を設定した場合， ~jumpを生じさせ得る。 ◎ Setting this attribute performs a synchronous update to the playback rate meaning that it does not make any attempt to synchronize with the playback state of animations running on a separate process or thread. As a result, setting the playbackRate for an in-flight animation can cause it to jump.

注記： ~animationが再生中のときでも，`再生~rate$を滑らかに更新するためには、 非同期的 `updatePlaybackRate()$m ~methodを利用すること。 ◎ To set the playback rate for an in-flight animation such that it smoothly updates, use the asynchronous updatePlaybackRate() method.

`playState@m ◎ playState, of type AnimationPlayState, readonly

取得子~手続きは ⇒ ~RET コレの`再生-状態$に対応する `AnimationPlayState$I 値 ◎ The play state of this animation.

`replaceState@m ◎ replaceState, of type AnimationReplaceState, readonly

取得子~手続きは ⇒ ~RET コレの`置換-状態$に対応する `AnimationReplaceState$I 値 ◎ The replace state of this animation.

`pending@m ◎ pending, of type boolean, readonly

取得子~手続きは ⇒ ~RET ~IS［ コレの`処理待ち再生-~task$ ~NEQ ε ］~OR［ コレの`処理待ち静止-~task$ ~NEQ ε ］ ◎ Returns true if this animation has a pending play task or a pending pause task.

`ready@m ◎ ready, of type Promise<Animation>, readonly

取得子~手続きは ⇒ ~RET コレの`現在の準備済み~promise$ ◎ Returns the current ready promise for this object.

`finished@m ◎ finished, of type Promise<Animation>, readonly

取得子~手続きは ⇒ ~RET コレの`現在の完遂d~promise$ ◎ Returns the current finished promise for this object.

`onfinish@m ◎ onfinish, of type EventHandler

`finish$et ~event用の~event~handler。 ◎ The event handler for the finish event.

`oncancel@m ◎ oncancel, of type EventHandler

`cancel$et ~event用の~event~handler。 ◎ The event handler for the cancel event.

`onremove@m ◎ onremove, of type EventHandler

`remove$et ~event用の~event~handler。 ◎ The event handler for the remove event.

`cancel()@m ◎ void cancel()

この~animationにより生じたすべての効果を~clearして，再生を中止する。 ◎ Clears all effects caused by this animation and aborts its playback＼

~method手続きは ⇒ `~animationを取消す$( コレ ) ◎ by running the cancel an animation procedure for this object.

`finish()@m ◎ void finish()

この~animationを［ 現在の方向において`結付けられた効果の終端$ ］へ`~seek$する。 ◎ Seeks the animation to the associated effect end in the current direction＼

~method手続きは ⇒ `~animationを完遂する$( コレ ) （例外が投出され得る） ◎ by running the finish an animation procedure for this object. ◎ 不要 DOMException of type "InvalidStateError" • Raised if this animation’s playback rate is zero, or if this animation’s playback rate is > zero and the associated effect end is infinity.

`play()@m ◎ void play()

この~animationの再生を始める／再開する。 ◎ Begins or resumes playback of the animation by＼

~method手続きは ⇒ `~animationを再生する$( コレ, `自動で巻戻す^i ) ◎ running the procedure to play an animation passing true as the value of the auto-rewind flag.

`pause()@m ◎ void pause()

この~animationの再生を休止する。 ◎ Suspends the playback of this animation＼

~method手続きは ⇒ `~animationを静止する$( コレ ) ◎ by running the procedure to pause an animation for this object.

`updatePlaybackRate(playbackRate)@m ◎ void updatePlaybackRate(playbackRate)

この~animationの`再生~rate$を非同期的に更新する。 ◎ Performs an asynchronous update of the playback rate of this animation＼

~method手続きは ⇒ `再生~rateを継目無く更新する$( コレ, %playbackRate ) ◎ by performing the seamlessly update the playback rate procedure, passing playbackRate as the new playback rate.

%playbackRate は、 更新に利用する再生~rateを有限な実数-で指定する。 ◎ playbackRate • A finite real number specifying the updated playback rate to use.

`reverse()@m ◎ void reverse()

この~animationの`再生~rate$を反転した上で、 それを利用して再生する。 ◎ Inverts the playback rate of this animation and plays it＼

~method手続きは ⇒ `~animationを逆転する$( コレ ) ◎ using the reverse an animation procedure for this object.＼

この~methodは、［ `play()$m と同じく，~animationの静止-を解く ］ことに加え、 ~animationが 逆方向への再生-をすでに完遂していた場合には， `結付けられた効果$の始端へ`~seek$する。 ◎ As with play(), this method unpauses the animation and, if the animation has already finished playing in the reversed direction, seeks to the start of the associated effect.

`persist()@m

~method手続きは ⇒ コレの`置換-状態$ ~SET `持続化$i ◎ Sets this animation’s replace state to persisted.

`commitStyles()@m

この~animationの`~animation効果$により生産された現在の`効果~値$を， 対応している`効果~target$の~inline~style【`~style属性$】に書込む。 ◎ Writes the current effect values produced by this animation’s animation effects to their corresponding effect targets' inline style＼

~method手続きは ⇒ `算出d~styleを~commitする$( コレ ) ◎ using the commit computed styles procedure.

この~interface上に定義される他のほとんどの~methodと違って、 この~methodを~callすると， `~style変化~event$を`誘発する^em （ `§ ~modelの~live性＠#model-liveness$ を見よ）。 ◎ Unlike most other methods defined on this interface, calling this method does trigger a style change event (see § 6.13 Model liveness).

注記： `算出d~styleを~commitする$手続-は［ この~animationが`除去-済み$iであっても，それ用の`効果~値$を含む ］ので、 この~methodは［ 置換された後にも，実際の~animationを維持することなく~animationの効果を維持する ］ために有用になる （ `§ 置換された~animationの除去-法＠~WANIM#removing-replaced-animations$を見よ）。 ◎ Since the procedure to commit computed styles includes the effect values for the animation even if it is removed, this method is useful for retaining the effect of an animation after it has been replaced (see § 5.5.2 Removing replaced animations) without retaining the actual animation.

~commitされる値は、 この~methodが~callされた時点における， `~animation効果$により生産された`算出d値^emであることに注意。 これらの値は算出d値【言い換えれば、確定的な値】なので、［ ~live~animationが生産する値のように，文脈に対する変更を反映する ］ことはない — ［ ~CSS変数の変化に対し応答する／ `font-size^p の算出d値の変化に基づいて `em^u 単位を計算し直す ］など。 ◎ Note that the values committed are the computed values produced by the animation effects at the time when this method is called. Since these values are computed values, they do not reflect to changes to context such as responding to changes to CSS variables or recalculating em units based on changes to the computed font-size in the way the values produced by a live animation would.

`persist()$m ~methodを利用すれば、 当の~animationが置換された後に （ `§ ~animationの置換-法＠~WANIM#replacing-animations$ を見よ）， 延伸している~animationの結果が成す全部的な忠実性を維持できるが、 当の~animationが資源を消費し続けることにもなることに注意。 ◎ In order to retain full fidelity of a filling animation’s result after it has been replaced (see § 5.5 Replacing animations), the persist() method can be used, but note that doing so will mean the animation continues to consume resources.

enum `AnimationPlayState@I { `idle$l, `running$l, `paused$l, `finished$l };

enum `AnimationReplaceState@I { `active$l, `removed$l, `persisted$l };

6.5. `AnimationEffect^I ~interface

`~animation効果$は、 ~WAnim~APIにおいては，抽象- `AnimationEffect$I ~interfaceで表現される。 ◎ Animation effects are represented in the Web Animations API by the abstract AnimationEffect interface.

[`Exposed$=Window]
interface `AnimationEffect@I {
  `EffectTiming$I `getTiming$m();
  `ComputedEffectTiming$I `getComputedTiming$m();
  `undefined$ `updateTiming$m(optional `OptionalEffectTiming$I %timing = {});
};

any onupdate(double? %progress, double %currentIteration, Animatable? %target, any %underlyingValue)

`getTiming()@m

この`~animation効果$用に指定された計時~propたちを返す。 ◎ Returns the specified timing properties for this animation effect.

返される `EffectTiming$I ~objを成す各~memberと `§ 計時~model$ を成す各~propとの対応関係については、 その~interfaceを見よ。 ◎ For the correspondence between the members of the returned EffectTiming object and properties of the timing model, see the EffectTiming interface.

`getComputedTiming()@m

この`~animation効果$用に計算される計時~propたちを返す。 ◎ Returns the calculated timing properties for this animation effect.

［ `getTiming()$m, `getComputedTiming()$m ］が返す `EffectTiming$I ~objを成す一部の~memberは，共通するが、 それらの値は，次の仕方で相違し得る： ◎ Although some of the attributes of the object returned by getTiming() and getComputedTiming() are common, their values can differ in the following ways:

• `duration$m1 ⇒ `getTiming()$m は文字列 `auto^l を返すこともある一方で、 `getComputedTiming()$m は — その~memberの定義に述べるように — `反復~所要時間$を表す実数を返すモノトスル。 ◎ duration – while getTiming() can return the string auto, getComputedTiming() must return a number corresponding to the calculated value of the iteration duration as defined in the description of the duration member of the EffectTiming interface.

  仕様のこの~levelでは、 `auto^l 値は，単純に 0 に置換されることを意味する。 ◎ In this level of the specification, that simply means that an auto value is replaced by zero.

• `fill$m1 ⇒ `getTiming()$m は文字列 `auto^l を返すこともある一方で、 `getComputedTiming()$m は — その~memberの定義に述べるように — 計時~計算に利用する特定の `FillMode$I を返すモノトスル。 ◎ fill – likewise, while getTiming() can return the string auto, getComputedTiming() must return the specific FillMode used for timing calculations as defined in the description of the fill member of the EffectTiming interface.

  この仕様のこの~levelでは、 `auto^l 値は 単純に `FillMode$I `none^l に置換されることを意味する。 ◎ In this level of the specification, that simply means that an auto value is replaced by the none FillMode.

注記： 他の計時~memberは、 将来には `auto^l の様な値を含むよう拡張される見込みが高い。 作者には、 計時~計算を遂行するときには， アリ~なら `getComputedTiming()$m を利用することが奨励される — 指定d値に許容される範囲や型が変更されたときの非互換性を避けるため。 ◎ Note: It is likely that other timing members could be extended in future to include auto-like values. When performing timing calculations, authors are encouraged to use getComputedTiming() where possible to avoid incompatibility should the range or type of allowed specified values be changed.

`getComputedTiming()$m が返す `ComputedEffectTiming$I 辞書には、 `getTiming()$m に比較して，追加的な計時~情報も定義される。 ◎ In addition to possible differences in the values returned, compared to getTiming(), getComputedTiming() returns additional timing information as defined by the ComputedEffectTiming dictionary.

`updateTiming(timing)@m

この`~animation効果$に指定された計時~propたちを更新する。 ◎ Updates the specified timing properties of this animation effect＼

~method手続きは ⇒ `~animation効果の計時~propを更新する$( コレ, %timing ) ◎ by performing the procedure to update the timing properties of an animation effect passing the timing parameter as input.

%timing 引数は、 更新する計時~propたちを与える。 改変される計時~propは、 %timing 上に`存在-$する~memberに対応するものに限られる。 ◎ optional OptionalEffectTiming timing • The timing properties to update. The timing properties corresponding to any members that do not exist on timing will not be modified.

`remove()^m ~method【この仕様には定義されていない】を利用して［ 親~group／~animation ］から効果を除去できる。 それを~level 1 に保って，単純に~animationから~animation効果を除去するものと定義するべきか？ [`2082$issue] ◎ The remove() method can be used to remove an effect from either its parent group or animation. Should we keep it in level 1 and define it simply as removing the animation effect from its animation? [Issue #2082]

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

dictionary `OptionalEffectTiming@II {
  `double$                             `delay$m;
  `double$                             `endDelay$m;
  `FillMode$I                           `fill$m;
  `double$                             `iterationStart$m;
  `unrestricted double$                `iterations$m;
  (`unrestricted double$ or `DOMString$) `duration$m;
  `PlaybackDirection$I                  `direction$m;
  `DOMString$                          `easing$m;
};

enum `FillMode@I { `none$l, `forwards$l, `backwards$l, `both$l, `auto$l };

enum `PlaybackDirection@I { `normal$l, `reverse$l, `alternate$l, `alternate-reverse$l };

dictionary `ComputedEffectTiming@I : `EffectTiming$I {
  `unrestricted double$  `endTime$m;
  `unrestricted double$  `activeDuration$m;
  `double$?              `localTime$m;
  `double$?              `progress$m;
  `unrestricted double$? `currentIteration$m;
};

6.6. `KeyframeEffect^I ~interface

`~keyframe効果$は `KeyframeEffect$I ~interfaceにより表現される。 ◎ Keyframe effects are represented by the KeyframeEffect interface.

[`Exposed$=Window]
interface `KeyframeEffect@I : `AnimationEffect$I {
  `KeyframeEffect$mc(
      `Element$I? %target,
      `object$? %keyframes,
      optional (`unrestricted double$ or `KeyframeEffectOptions$I) %options = {}
  );
  `constructor＠#dom-keyframeeffect-keyframeeffect-source$(`KeyframeEffect$I %source);

  attribute `Element$I? `target$m;
  attribute `CSSOMString$? `pseudoElement$m;
  attribute `CompositeOperation$I `composite$m;
  `sequence$<`object$> `getKeyframes$m();
  `undefined$ `setKeyframes$m(`object$? %keyframes);
};

`KeyframeEffect(target, keyframes, options)@m0 ◎ KeyframeEffect (target, keyframes, options)

構築子~手続きは： ◎ Creates a new KeyframeEffect object using the following procedure: • Create a new KeyframeEffect object, effect.

1. コレの`~target要素$ ~SET %target ◎ Set the target element of effect to target.
2. コレの`~target疑似-選択子$ ~SET ~NULL ◎ ↓
3. ~IF［ %options は `KeyframeEffectOptions$I ~objである ］ ⇒ コレの`pseudoElement$m 設定子~手続き( %options[ "`pseudoElement$m1" ] ) ◎ Set the target pseudo-selector to the result corresponding to the first matching condition below: ◎ If options is a KeyframeEffectOptions object with a pseudoElement property, • Set the target pseudo-selector to the value of the pseudoElement property. ◎ When assigning this property, the error-handling defined for the pseudoElement setter on the interface is applied. If the setter requires an exception to be thrown, this procedure must throw the same exception and abort all further steps. ◎ Otherwise, • Set the target pseudo-selector to null.
4. %計時~入力 ~SET %options ◎ Let timing input be the result corresponding to the first matching condition below: ◎ If options is a KeyframeEffectOptions object, • Let timing input be options.
5. ~IF［ %options は `KeyframeEffectOptions$I ~objでない（ `double^c 型である） ］ ⇒＃ %計時~入力 ~SET 新たな `EffectTiming$I ~obj（各~memberはそれぞれの既定~値に設定される）； %計時~入力 の `duration$m1 ~SET %options ◎ Otherwise (if options is a double), • Let timing input be a new EffectTiming object with all members set to their default values and duration set to options.
6. `~animation効果の計時~propを更新する$( コレ, %計時~入力 ) （例外が投出され得る） ◎ Call the procedure to update the timing properties of an animation effect of effect from timing input. ◎ If that procedure causes an exception to be thrown, propagate the exception and abort this procedure.
7. ~IF［ %options は `KeyframeEffectOptions$I ~objである ］ ⇒ コレの`composite$m 設定子~手続き( %options[ "`composite$m1" ] ) ◎ If options is a KeyframeEffectOptions object, assign the composite property of effect to the corresponding value from options. ◎ When assigning this property, the error-handling defined for the corresponding setter on the KeyframeEffect interface is applied. If the setter requires an exception to be thrown for the value specified by options, this procedure must throw the same exception and abort all further steps.
8. コレ用の`~keyframe$が成す集合を，［ %keyframes に `§ ~keyframes引数の処理-法$ を適用した結果 ］で初期化する 【！setKeyframes()$m 用に定義される手続-( keyframes )】 ◎ Initialize the set of keyframes by performing the procedure defined for setKeyframes() passing keyframes as the input.

%target 引数は`~target要素$を与える。 また，特定の要素を~targetにしない~animation用には、 ~NULL にされてヨイ。 ◎ Element? target • The target element. This may be null for animations that do not target a specific element.

%keyframes 引数は、 利用する`~keyframe$の集合を与える。 この引数の形式と処理は、 `§ ~keyframes引数の処理-法$ にて定義される。 ◎ object? keyframes • The set of keyframes to use. The format and processing of this argument is defined in § 6.6.3 Processing a keyframes argument.

%options 引数は、 当の効果の［ `反復~所要時間$を指定する実数, または 計時と挙動を指定する~propたちが成す~collection ］を与える。 ◎ optional KeyframeEffectOptions options • Either a number specifying the iteration duration of the effect, or a collection of properties specifying the timing and behavior of the effect.

この構築子の用法~例は、 § 新たな `KeyframeEffect^I ~objの作成-法 に与えられる。 ◎ Examples of the usage of this constructor are given in § 6.6.1 Creating a new KeyframeEffect object.

`KeyframeEffect(source)^m ◎ KeyframeEffect (source)

%source と同じ~propたちを伴う，新たな `KeyframeEffect$I ~objを作成する。 ◎ Creates a new KeyframeEffect object with the same properties as source＼

構築子~手続きは： ◎ using the following procedure: • Create a new KeyframeEffect object, effect.

1. コレの［ 次に挙げる各~prop ］ ~SET %source の対応する~prop ⇒＃ `効果~target$, `~keyframe$, `組成-演算~型$ ◎ Set the following properties of effect using the corresponding values of source: • effect target, • keyframes, • composite operation, and
2. コレの［ 次に挙げる各~計時~prop ］ ~SET %source に指定された対応する~prop ⇒＃ `開始-遅延$, `終止-遅延$, `延伸~mode$, `反復~始端$, `反復~回数$, `反復~所要時間$, `再生~方向$, `~easing関数$ ◎ all specified timing properties: • start delay, • end delay, • fill mode, • iteration start, • iteration count, • iteration duration, • playback direction, and • easing function.

注記： `KeyframeEffect(target, keyframes, options)$m0 構築子と違って、 例外は投出されない — %~source 上に指定されている どの計時~propも妥当と見做せるので。 ◎ Note: Unlike the KeyframeEffect(target, keyframes, options) constructor, we do not need to re-throw exceptions since the timing properties specified on source can be assumed to be valid.

%source 引数は、 新たな`~keyframe効果$を定義する各種~propの複製-元になる`~keyframe効果$を与える。 ◎ KeyframeEffect source • The keyframe effect from which to copy the properties that define the new keyframe effect.

`target@m ◎ target, of type Element, nullable

取得子~手続きは ⇒ ~RET コレの`~target要素$【！(either the effect target...)】 ◎ The target element being animated by this object (either the effect target if it is an Element or its originating element if it is a pseudo-element).＼

結果は ~NULL になる場合もある — ~audio~APIを利用して音響を生産する~animationなど， 特定の要素を~targetにしない~animation用には。 ◎ This may be null for animations that do not target a specific element such as an animation that produces a sound using an audio API.

`pseudoElement@m ◎ pseudoElement, of type CSSOMString, nullable

取得子~手続きは ⇒ ~RET コレの`効果~target$に応じて ⇒＃ 疑似要素であるならば その`~target疑似-選択子$（例： `before^pe ）／ ~ELSE_ ~NULL ◎ The target pseudo-selector. null if this effect has no effect target or if the effect target is an element (i.e. not a pseudo-element). When the effect target is a pseudo-element, this specifies the pseudo-element selector (e.g. ::before).

設定子~手続きは ⇒ コレの`効果~target$【！`~animation効果$】の`~target疑似-選択子$ ~SET `疑似要素~名を構文解析する$( 所与の値 ) 【`効果~target$ ~EQ ~NULL の場合が述べられていない】 ◎ On setting, sets the target pseudo-selector of the animation effect to the result of＼

`疑似要素~名を構文解析する@ ときは、 所与の( %値 ) に対し： ◎ pseudo-element parsing on the provided value, defined as the following: • Given the value value, perform the following steps:

1. ~IF［ %値 ~NEQ ~NULL ］~AND［ %値 は無効な `pseudo-element-selector$t である ］ ⇒ ~THROW `SyntaxError$E ◎ If value is not null and is an invalid <pseudo-element-selector>, • Throw a DOMException with error name "SyntaxError". • Abort. • Note: In effect, this means that if the result of this algorithm is used to set a variable, then that variable remains unchanged.

   注記： この文脈における無効は、 `無効な選択子$ `SELECTORS-4$r の定義に従う。 構文上は無効な疑似要素に加え， ~UAが実用~levelで~supportしない疑似要素も無効と判断される。 ◎ Note: Invalid in this context follows the definition of an invalid selector defined in [SELECTORS-4] such that syntactically invalid pseudo-elements as well as pseudo-elements for which the user agent has no usable level of support are both deemed invalid.

2. ~IF［ %値 ~IN { `:before^l, `:after^l, `:first-letter^l, `:first-line^l } （ %値 は旧来の構文による疑似要素~名である） ］ ⇒ %値 の先頭に `:^l を付加する ◎ If value is one of the legacy Selectors Level 2 single-colon selectors (':before', ':after', ':first-letter', or ':first-line'), then return the equivalent two-colon selector (e.g. '::before').
3. ~RET %値 ◎ Otherwise, return value.

`composite@m ◎ composite, of type CompositeOperation

取得子~手続きは ⇒ ~RET ［ `効果~stack$と組成するときに利用される，コレの`組成-演算~型$ ］に対応する `CompositeOperation$I 列挙~値 ◎ The composite operation used to composite this keyframe effect with the effect stack, as specified by one of the CompositeOperation enumeration values.

設定子~手続きは ⇒ コレの`組成-演算~型$ ~SET 所与の値に対応するそれ ◎ On setting, sets the composite operation property of this animation effect to the provided value.

`getKeyframes()@m ◎ sequence<object> getKeyframes()

コレを成している一連の~keyframeを返す — それぞれに`算出d~keyframe~offset$を伴わせて。 ◎ Returns the keyframes that make up this effect along with their computed keyframe offsets.

◎非規範的

この~methodの結果は、 次の形式による~objたちが成す連列になる： ◎ The result of this method is a sequence of objects of the following format:

dictionary ComputedKeyframe {
  /* 
無数の~propの［
名前, 値
］が成す~pair：
◎
... property-value pairs ...
i.e. DOMString propertyName

  DOMString propertyName1;
  DOMString propertyName2;
  ...
 */
  double?   offset = null;
  double    computedOffset;
  DOMString easing = "linear";
  `CompositeOperationOrAuto$I composite = "auto";
};

各~memberの意味と値は、 次に従う： ◎ The meaning and values of each member is as follows:

`offset^c

この`~keyframe$の`~keyframe~offset$を指定する［ ~NULL または 閉区間 [0, 1] に入る実数 ］になる。 ◎ The keyframe offset of the keyframe specified as a number between 0.0 and 1.0 inclusive, or null.

これは、 隣接する`~keyframe$の間隔が自動的に~~決定される場合には， ~NULL になる。 ◎ This will be null if the keyframe is to be automatically spaced between adjacent keyframes.

`computedOffset^c

`欠落~keyframe~offsetを算出する$手続-を走らす一部として，この`~keyframe$用に計算された`算出d~keyframe~offset$になる。 ◎ The computed keyframe offset for this keyframe calculated as part of running the compute missing keyframe offsets procedure.

`offset^c ~memberと違って， ~NULL になることは決してない。 ◎ Unlike the offset member, the computedOffset is never null.

`easing^c

`~easing関数$を与える — ［ この~keyframeから次t~keyframeまでの，時刻の進捗 ］を変形するために利用される。 ◎ The easing function used to transform the progress of time from this keyframe until the next keyframe in the series.

`composite^c

`~keyframeに特有な組成-演算~型$を与える — この~keyframe内に指定された各~値を`下層~値$と結合するために利用される。 ◎ The keyframe-specific composite operation used to combine the values specified in this keyframe with the underlying value.

この~memberは、 `~keyframe効果$に指定された`組成-演算~型$が利用されている場合には， `~autoCO$l になる。 ◎ This member will be auto if the composite operation specified on the keyframe effect is being used.

`~keyframe$は［ 現在の~Web~IDLでは表出-可能でない `partially open-ended^en 辞書~型 【固定的な何個かの~memberに加えて、名前が不定な不定個の~memberも有する型】 ］により表現されるので、 この~methodの結果を準備するために利用する手続-は， 下に与える注釈文にて定義される： ◎ Since keyframes are represented by a partially open-ended dictionary type that is not currently able to be expressed with WebIDL, the procedure used to prepare the result of this method is defined in prose below:

1. %結果 ~LET 空~連列 ◎ Let result be an empty sequence of objects.
2. %効果 ~LET この`~keyframe効果$ ◎ ↓

3. %~keyframe~list ~LET %効果 に応じて： ◎ Let keyframes be one of the following:

   1. ［ %効果 は `CSSAnimation$I に`結付けられた効果$である ］~AND［ %効果 用の`~keyframe$たちは `setKeyframes()$m の~callにより成功裡に置換されたものでない ］ならば ⇒ %効果 用の`算出d~keyframe~list$ ◎ If this keyframe effect is associated with a CSSAnimation, and its keyframes have not been replaced by a successful call to setKeyframes(), • the computed keyframes for this keyframe effect.
   2. ~ELSE_ `欠落~keyframe~offsetを算出する$( %効果 用の`~keyframe$たち ) ◎ Otherwise, • the result of applying the procedure compute missing keyframe offsets to the keyframes for this keyframe effect.

   注記： `~CSS~animation$i 用には`算出d~keyframe~list$を返す — ~CSS内で指定された~keyframeには【 `ComputedKeyframe^I 】辞書で表現し得ないものがあるので。 ◎ Note: We return computed keyframes for CSS Animations because not all keyframes specified in CSS can be represented by a dictionary.

4. %~keyframe~list 内の ~EACH( %~keyframe ) に対し： ◎ For each keyframe in keyframes perform the following steps:

   1. 辞書~obj %出力~keyframe を初期化する — 次の定義を利用して： ◎ Initialize a dictionary object, output keyframe, using the following definition:

      dictionary `BaseComputedKeyframe@I {
        `double$?   `offset@m = null;
        `double$    `computedOffset@m;
        `DOMString$ `easing@m = "linear";
        `CompositeOperationOrAuto$I `composite@m = "auto";
      };
      

   2. %出力~keyframe の ⇒＃ `offset$m ~member ~SET %~keyframe の`~keyframe~offset$, `computedOffset$m ~member ~SET %~keyframe の`算出d~keyframe~offset$, `easing$m ~member ~SET %~keyframe の~keyframeに特有な`~easing関数$, `composite$m ~member ~SET %~keyframe の`~keyframeに特有な組成-演算~型$に対応する `CompositeOperationOrAuto$I 列挙~値 ◎ Set the offset, computedOffset, easing, and composite members of output keyframe to the respective keyframe offset, computed keyframe offset, keyframe-specific easing function, and keyframe-specific composite operation values of keyframe.

   3. %~keyframe 内の~animation用の ~EACH( ~prop ( 名/値 ) ~pairが成す %宣言 ) に対し： ◎ For each animation property-value pair declaration in keyframe, perform the following steps:

      1. %~prop名 ~LET `~animation~prop名から~IDL属性~名を得る$( %宣言 の~prop名 ) ◎ Let property name be the result of applying the animation property name to IDL attribute name algorithm to the property name of declaration.
      2. %~IDL値 ~LET `~CSS値を直列化する$( %宣言 ) `CSSOM$r ◎ Let IDL value be the result of serializing the property value of declaration by passing declaration to the algorithm to serialize a CSS value [CSSOM].
      3. %値 ~LET %~IDL値 を`~ES文字列~値に変換する＠~WEBIDLjs#DOMString-to-js$ ◎ Let value be the result of converting IDL value to an ECMAScript String value.
      4. %出力~keyframe 上の `DefineOwnProperty$sl 内部~methodを~callする — 次を渡して ⇒＃ ~prop名 %~prop名, ~prop記述子 { [[Writable]]: `true^jv, [[Enumerable]]: `true^jv, [[Configurable]]: `true^jv, [[Value]]: %値 }, `Boolean^jc ~flag `false^jv ◎ Call the [[DefineOwnProperty]] internal method on output keyframe with property name property name, Property Descriptor { [[Writable]]: true, [[Enumerable]]: true, [[Configurable]]: true, [[Value]]: value } and Boolean flag false.
   4. %結果 に %出力~keyframe を付加する ◎ Append output keyframe to result.
5. ~RET %結果 ◎ Return result.

`setKeyframes(keyframes)@m ◎ void setKeyframes(object? keyframes)

コレを成している`~keyframe$の集合を，［ `§ ~keyframes引数の処理-法$ に従って， %keyframes 引数を処理した結果 ］に置換する。 その手続-が例外を投出した場合、 この効果の`~keyframe$は改変されない。 ◎ Replaces the set of keyframes that make up this effect. ◎ object? keyframes • A series of keyframes whose format and processing is defined by § 6.6.3 Processing a keyframes argument. ◎ This effect’s set of keyframes is replaced with the result of performing the procedure to process a keyframes argument. If that procedure throws an exception, this effect’s keyframes are not modified.

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);

%elem.animate([
    { color: 'blue' },
    { color: 'green' },
    { color: 'red' },
    { color: 'yellow' }
], 2000);

%elem.animate({ color: [ 'blue', 'green', 'red', 'yellow' ] }, 2000);

%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);

%elem.animate([
    { color: 'red' }
], 1000);

%elem.animate({ color: [ 'red' ] }, 1000);

%elem.animate({ color: 'red' }, 1000);

%elem.animate([
    { color: 'blue' },
    { color: 'green', offset: 0.5 },
    { color: 'red' },
    { color: 'yellow', offset: 0.8 },
    { color: 'pink' }
], 2000);

%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);
// The following produces the same result.
%elem.animate({
    color: [ 'blue', 'green', 'yellow' ],
    easing: [ 'ease-in', 'ease-out' ]
}, 2000);

%elem.animate({
    color: [ 'blue', 'green', 'yellow' ],
    easing: 'ease-in-out'
}, 2000);

%elem.animate({
    color: [ 'blue', 'green', 'yellow' ],
    easing: 'ease-in-out'
}, 2000);

%elem.animate(
    { color: [ 'blue', 'green', 'yellow' ] },
    { duration: 2000, easing: 'ease-in-out' }
);

dictionary Keyframe {
  /* 
無数の~propの［
名前, 値
］が成す~pair：
◎
... property-value pairs ...
i.e. DOMString propertyName
 
  DOMString propertyName1;
  DOMString propertyName2;
  ...
*/
  double?   offset = null;
  DOMString easing = "linear";
  `CompositeOperationOrAuto$I  composite = "auto";
};

dictionary PropertyIndexedKeyframes {
  /* 
無数の~propの［
名前, 値~list
］が成す~pair：
◎
... property-value and property-valuelist pairs ...
i.e. (DOMString or sequence<DOMString>) propertyName
 
  (DOMString or sequence<DOMString>) propertyName1;
  (DOMString or sequence<DOMString>) propertyName2;
  ...
*/
  (double? or sequence<double?>)     offset = [];
  (DOMString or sequence<DOMString>) easing = [];
  (`CompositeOperationOrAuto$I or sequence<`CompositeOperationOrAuto$I>) composite = [];
};

typedef (sequence<Keyframe> or PropertyIndexedKeyframes) KeyframeArgument;

dictionary `KeyframeEffectOptions@I : `EffectTiming$I {
  `CompositeOperation$I `composite$m = "replace";
  `CSSOMString$? `pseudoElement$m = null;
};

6.7. `CompositeOperation^I, `CompositeOperationOrAuto^I 列挙

`~keyframe効果$の組成の挙動にアリな`組成-演算~型$は、 `CompositeOperation$I 列挙により表現される 【各~列挙~値は、暗黙的に，対応する組成-演算~型と同一視される】： ◎ The possible values of an keyframe effect’s composition behavior are represented by the CompositeOperation enumeration.

enum `CompositeOperation@I {
  `replace$l,
  `add$l,
  `accumulate$l
};

`replace@l

`置換-型$に対応する — `~animation効果$は、 その`下層~値$を上書きするように結合される。 ◎ Corresponds to the replace composite operation value such that the animation effect overrides the underlying value it is combined with.

`add@l

`加算-型$に対応する — `~animation効果$は、 その`下層~値$に`加算-$するように結合される。 ◎ Corresponds to the add composite operation value such that the animation effect is added to the underlying value with which it is combined.

`accumulate@l

`累積-型$に対応する — `~animation効果$は、 その`下層~値$に`累積-$するように結合される。 ◎ Corresponds to the accumulate composite operation value such that the animation effect is accumulated onto the underlying value.

`~keyframeに特有な組成-演算~型$にアリな値は、 `CompositeOperation$I 列挙と同じ値たち, および追加的な `~autoCO$l 値で表現される： ◎ The possible values of a keyframe's composition behavior share the same values as the CompositeOperation enumeration along with the additional auto value.

enum `CompositeOperationOrAuto@II {
  `replace$l,
  `add$l,
  `accumulate$l,
  `~autoCO$l
};

`~autoCO@l

ε に対応する — 当の`~keyframe$が属する`~keyframe効果$の`組成-演算~型$を利用するべきであることを指示する。 ◎ Indicates that the composite operation of the associated keyframe effect should be used.

6.8. `Animatable^I ~interface~mixin

`~animation効果$（ `KeyframeEffect$I ~obj）の`~target要素$にもなり得る~objは、 `Animatable$I ~interface~mixinを実装する。 ◎ Objects that could be the target of an KeyframeEffect object implement the Animatable interface mixin.

interface mixin `Animatable@I {
  `Animation$I `animate$m(
      `object$? %keyframes,
      optional (`unrestricted double$ or `KeyframeAnimationOptions$I) %options = {}
  );
  `sequence$<`Animation$I> `getAnimations$m(optional `GetAnimationsOptions$I %options = {});
};
dictionary `KeyframeAnimationOptions@I : `KeyframeEffectOptions$I {
  `DOMString$ `id$m = "";
  `AnimationTimeline$I? `timeline$m;
};

dictionary `GetAnimationsOptions@I {
  boolean `subtree$m = false;
  `CSSOMString$? `pseudoElement$m = null;
};

`animate(keyframes, options)@m ◎ Animation animate(keyframes, options)

~method手続きは： ◎ Performs the following steps:

1. %~realm ~LET コレに`関連な~realm$ ◎ ↓
2. %効果 ~LET %~realm 内の新たな `KeyframeEffect$I ~obj ◎ ↓
3. %効果 上の `KeyframeEffect$m0 構築子~手続き( コレ, %keyframes, %options ) （例外が投出され得る） ◎ Let target be the object on which this method was called. ◎ Construct a new KeyframeEffect object effect in the relevant Realm of target by using the same procedure as the KeyframeEffect(target, keyframes, options) constructor, passing target as the target argument, and the keyframes and options arguments as supplied. ◎ If the above procedure causes an exception to be thrown, propagate the exception and abort this procedure.
4. %時列線 ~SET ε ◎ ↓
5. ~IF［ %options は `KeyframeAnimationOptions$I ~objである ］ ⇒ %時列線 ~SET %options[ "`timeline$m1" ] 【！%時列線 ~SET `現在の大域~obj$（ `Window$I ）に`結付けられた文書$の`既定の文書~時列線$】 ◎ If options is a KeyframeAnimationOptions object, let timeline be the timeline member of options or, if timeline member of options is missing, the default document timeline of the node document of the element on which this method was called.
6. %~animation ~LET %~realm 内の新たな `Animation$I ~obj ◎ ↓

7. ~IF［ %時列線 ~EQ ε ］ ⇒ %~animation 上の `Animation$m0 構築子~手続き( %効果 )

   【 この段は、 この訳による補完： 原文は、 %options が `KeyframeAnimationOptions^I であって %時列線 ~EQ ε になる場合に %時列線 を設定する記述があるが、 それは， `new Animation^m 構築子の中でまったく同じに設定されるので必要ない。 加えて， %options が `KeyframeAnimationOptions^I でない場合に %時列線 を設定していないが、 その場合も省略するものと見受けられる。 】

8. ~ELSE ⇒ %~animation 上の `Animation$m0 構築子~手続き( %効果, %時列線 ) ◎ Construct a new Animation object, animation, in the relevant Realm of target by using the same procedure as the Animation() constructor, passing effect and timeline as arguments of the same name.
9. ~IF［ %options は `KeyframeAnimationOptions$I ~objである ］ ⇒ %~animation の `id$m 属性 ~SET %options[ "`id$m1" ] ◎ If options is a KeyframeAnimationOptions object, assign the value of the id member of options to animation’s id attribute.
10. `~animationを再生する$( %~animation, `自動で巻戻す^i ) ◎ Run the procedure to play an animation for animation with the auto-rewind flag set to true.
11. ~RET %~animation ◎ Return animation.

◎非規範的

次の~code片は： ◎ The following code fragment:

var %animation = %elem.animate({ opacity: 0 }, 2000);

概ね，次に等価になる： ◎ is roughly equivalent to:

var %effect = new KeyframeEffect(elem, { opacity: 0 }, 2000);
var %animation = new Animation(effect, elem.ownerDocument.timeline);
animation.play();

%keyframes 引数は、 利用する`~keyframe$を与える。 %options 引数は、 作成される `KeyframeEffect$I 用の各種［ 計時, ~animation ］~optionを与える。 ◎ keyframes • The keyframes to use. This value is passed to the KeyframeEffect(target, keyframes, options) constructor as the keyframes parameter and has the same interpretation as defined for that constructor. ◎ options • The timing and animation options for the created KeyframeEffect and Animation.

`getAnimations(options)@m ◎ sequence getAnimations(options)

~method手続きは： `GetAnimationsOptions^II ◎ • Let object be the object on which this method was called.

1. %~target ~LET コレ ◎ ↓
2. %疑似要素~名 ~LET %options[ "`pseudoElement$m1" ] ◎ ↓

3. ~IF［ %疑似要素~名 ~NEQ ~NULL ］：

   1. %疑似要素~名 ~SET `疑似要素~名を構文解析する$( %疑似要素~名 )
   2. %~target ~SET コレを`出自の要素$とする`疑似要素$のうち %疑似要素~名 により識別されもの
   ◎ Let pseudoElement be the result of pseudo-element parsing applied to pseudoElement of options, or null if options is not passed. ◎ If pseudoElement is not null, then let target be the pseudo-element identified by pseudoElement with object as the originating element.＼ ↑ Otherwise, let target be object.
4. ~RET %options[ "`subtree$m1" ] に応じて ⇒＃ ~T ならば %~target の`下位tree用の関連な~animation群$†／ ~F ならば %~target に`関連な~animation群$† 【† を成す各`~animation$を表現する `Animation$I ~objたちが成す~list】 ◎ If options is passed with subtree set to true, then return the set of relevant animations for a subtree of target.＼ Otherwise, return the set of relevant animations for target.

返される~listは、［ 該当する~animationに`結付けられた効果$の各`~target~prop$の`効果~stack$ ］にて述べた`組成-順序$を利用して~sortされる。 ◎ The list returned by the above algorithm is sorted using the composite order described for the associated animations of effects in § 5.4.2 The effect stack.

この~methodを~callすると，`~target要素$に対し`~style変化~event$を誘発する。 その結果，返される~listは、 ~animationに対する まだ処理-待ちにある~style変更 — ~animationに関係する~style~prop【各種 `animation-*^p, `transition-*^p など】に対する変更など — があれば，それらを`適用した後^emの状態を反映する。 ◎ Calling this method triggers a style change event for the target element. As a result, the returned list reflects the state after applying any pending style changes to animation such as changes to animation-related style properties that have yet to be processed. ◎ （略） options • Parameters governing the set of animations returned by getAnimations().

`KeyframeAnimationOptions$I0 の： ◎ ↓

• `id@m は、 生成される `Animation$II の `id$m1 属性にアテガう文字列を与える。 ◎ id, of type DOMString, defaulting to "" • The string to assign to the generated Animation's id attribute.
• `timeline@m は省略可能であり、 在るならば，新たに作成される`~animation$の`時列線$Anを指定する。 ◎ timeline, of type AnimationTimeline, nullable • An optional value which, if present, specifies the timeline with which to associate the newly-created animation.

`GetAnimationsOptions$I の［ `subtree@m1 , `pseudoElement@m1 ］~memberについては、 `Animatable^II `getAnimations()$m1 を見よ【以下略】。 ◎ subtree, of type boolean, defaulting to false • If true, indicates that animations associated with an animation effect whose target element is a descendant of the object on which getAnimations() is called should also be included in the result. ◎ pseudoElement, of type CSSOMString, nullable, defaulting to null • If set, indicates that the target of the operation is the pseudo-element identified by this pseudo selector (e.g. ::before) with the originating element being the object on which the function is called.

6.9. `Document^I ~interfaceに対する拡張

`DOM$r に定義される `Document$I ~interfaceは、 次により拡張される： ◎ The following extensions are made to the Document interface defined in [DOM].

partial interface `Document$I0 {
  readonly attribute `DocumentTimeline$I `timeline$m;
};

`timeline@m ◎ timeline, of type DocumentTimeline, readonly

取得子~手続きは ⇒ ~RET コレの`既定の文書~時列線$を表現している `DocumentTimeline$I ~obj ◎ The DocumentTimeline object representing the default document timeline.

6.10. `DocumentOrShadowRoot^I ~interface~mixinに対する拡張

`DOM$r に定義される `DocumentOrShadowRoot$I ~interface~mixinは、 次により拡張される： ◎ The following extensions are made to the DocumentOrShadowRoot interface mixin defined in [DOM].

partial interface mixin `DocumentOrShadowRoot$I0 {
  `sequence$<`Animation$I> `getAnimations$m();
};

`getAnimations()@m ◎ sequence<Animation> getAnimations()

コレの`下位tree用の関連な~animation群$ 【を成す各`~animation$を表現する `Animation$I ~objからなる~list】 を返す。 ◎ Returns the set of relevant animations for a subtree for the document or shadow root on which this method is called.

返される~listは、［ 該当する~animationに`結付けられた効果$の各`~target~prop$の`効果~stack$ ］にて述べた`組成-順序$を利用して~sortされる。 ◎ The returned list is sorted using the composite order described for the associated animations of effects in § 5.4.2 The effect stack.

この~methodを~callすると，この文書に対し`~style変化~event$を誘発する。 その結果，返される~listは、 ~animationに対する まだ処理-待ちにある~style変更 — ~animationに関係する~style~prop【各種 `animation-*^p, `transition-*^p など】に対する変更など — があれば，それらを`適用した後^emの状態を反映する。 ◎ Calling this method triggers a style change event for the document. As a result, the returned list reflects the state after applying any pending style changes to animation such as changes to animation-related style properties that have yet to be processed.

6.11. `Element^I ~interfaceに対する拡張

`Element$I `DOM$r は，~animationの~targetになり得るので、 その~interfaceは，次のとおり拡張される： ◎ Since DOM Elements can be the target of an animation, the Element interface [DOM] is extended as follows:

`Element$I includes `Animatable$I;

%elem.animate({ color: 'red' }, 2000);

6.12. `AnimationPlaybackEvent^I ~interface

`~animation再生~event$は、 `AnimationPlaybackEvent$I ~interfaceを利用して表現される。 ◎ Animation playback events are represented using the AnimationPlaybackEvent interface.

[`Exposed$=Window]
interface `AnimationPlaybackEvent@I : `Event$I {
  `AnimationPlaybackEvent$mc(`DOMString$ %type, optional `AnimationPlaybackEventInit$I %eventInitDict = {});
  readonly attribute `double$? `currentTime$m;
  readonly attribute `double$? `timelineTime$m;
};
dictionary `AnimationPlaybackEventInit@I : `EventInit$I {
  `double$? `currentTime@m = null;
  `double$? `timelineTime@m = null;
};

`AnimationPlaybackEvent(type, eventInitDict)@m0 ◎ AnimationPlaybackEvent(type, eventInitDict)

`~eventを構築する$手続-を利用して，新たな `AnimationPlaybackEvent$I ~objを構築する `DOM$r ◎ Constructs a new AnimationPlaybackEvent object using the procedure defined for constructing events [DOM].

`currentTime@m ◎ currentTime, of type double, readonly, nullable

取得子は、 コレが~queueされた~momentにおける［ コレを生成した`~animation$の`現-時刻$ ］を返す。 ◎ The current time of the animation that generated the event at the moment the event was queued.＼

この~eventが生成された時点で`~animation$は`遊休中$iであった場合、 結果は ~NULL になる。 ◎ This will be null if the animation was idle at the time the event was generated.

`timelineTime@m ◎ timelineTime, of type double, readonly, nullable

取得子は、 コレが~queueされた~momentにおける［ コレを生成した`~animation$の`時列線~現-時刻$ ］を返す。 ◎ The time value of the timeline with which the animation that generated the event is associated at the moment the event was queued. This will be null if the animation was not associated with an active timeline at the time the event was queued. ◎

◎ 訳は省略： currentTime, of type double, nullable, defaulting to null • See the description of the currentTime attribute. ◎ timelineTime, of type double, nullable, defaulting to null • See the description of the timelineTime attribute.

6.13. ~modelの~live性

~modelのどこかに加えられた変更は、 `§ 計時~model$ 全体, および依存する~styleを更新させる。 ◎ Changes made to any part of the model cause the entire timing model to be updated and any dependent style.

他が言明されない限り，この`~WAnim~API$に定義される各種~interfaceを成す各［ ~methodや構築子を呼出しても，他の~memberを取得しても／設定しても ］，`~style変化~event$を`生産することはない^em。 ◎ Unless otherwise stated, invoking the methods or constructors, or getting or setting the members of interfaces defined in the Web Animations API does not produce a style change event.

注記： この仕様を拡張する他の仕様には、［ そのような~event`たち^emが，どの状況下で誘発されるか ］を導入することにより，［ `~style変化~event$に対する要件を精緻化する ］ことが期待される。 例えば，［ この仕様~内の~interfaceが， ~CSS~markupにより定義される~animationを表現する ］場合、 それらの~methodの多くは，［ 指定された~styleに対する変更を反映するため， `~style変化~event$を誘発する ］必要がある。 ◎ Note: Other specifications that extend this specification are expected to refine the requirements on style change events by introducing circumstances where such events are triggered. For example, when the interfaces in this specification represent animations defined by CSS markup, many of their methods will need to trigger style change events in order to reflect changes to the specified style.