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

取得子は、此れの`現-時刻$tLを返す（此れは`作動中$でないときは ~NULL になる）。 ◎ 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,
 `DocumentTimeline$mC(optional `DocumentTimelineOptions$I %options)]
interface `DocumentTimeline@I : `AnimationTimeline$I {
};

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

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

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

この構築子は、次のようにされた`文書~時列線$を表現する，新たな `DocumentTimeline$I を返す ⇒＃ `属する文書$ ~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のみを定義するが、他の仕様は，この集合を拡張しても~MAY。 ◎ 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,
 `Animation$mC(optional `AnimationEffect$I? %effect = null,
             optional `AnimationTimeline$I? %timeline)]
interface `Animation@I : `EventTarget$I {
             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 `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;
    void `cancel$m();
    void `finish$m();
    void `play$m();
    void `pause$m();
    void `updatePlaybackRate$m(`double$ %playbackRate);
    void `reverse$m();
};

`Animation(effect, timeline)@m ◎ Animation (effect, timeline)

新たな `Animation$I ~objを作成する。 ◎ Creates a new Animation object＼

被呼出時には、次を走らす： ◎ using the following procedure.

1. %~animation ~LET 新たな `Animation$I ~obj ◎ Let animation be a new Animation object.
2. ~IF［ %timeline 引数は与えられていない ］ ⇒ %timeline ~SET `現在の大域~obj$である `Window$I に`結付けられている文書$の`既定の文書~時列線$ ◎ ↓
3. `時列線を設定する$( %~animation, %timeline ) ◎ Run the procedure to set the timeline of an animation on animation passing timeline as the new timeline or, if a timeline argument is missing, passing the default document timeline of the Document associated with the Window that is the current global object.
4. `~target効果を設定する$( %~animation, %effect ) ◎ Run the procedure to set the target effect of an animation on animation passing source as the new effect.

%effect 引数（省略可）は、 ~NULL でないならば，新たに作成する`~animation$にアテがう`~target効果$を指定する。 ◎ effect • An optional value which, if not null, specifies the target 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

取得子は、此れの`~target効果$を返す。 ◎ The target effect associated with this animation.＼

設定して，この~animationの`~target効果$を更新できる — 設定子は、次を走らす ⇒ `~target効果を設定する$( 此れ, 所与の値 ) ◎ Setting this attribute updates the object’s target effect using the procedure to set the target effect of an animation.

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

取得子は、此れの`時列線$Anを返す。 ◎ The timeline associated with this animation.＼

設定して，この~animationの`時列線$Anを更新できる — 設定子は、次を走らす ⇒ `時列線を設定する$( 此れ, 所与の値 ) ◎ 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

取得子は、此れの`開始-時刻$を返す。 ◎ 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

取得子は、此れの`現-時刻$を返す。 ◎ 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

取得子は、此れの`再生~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 may cause it to jump.

注記： ~animationが再生中のときでも，`再生~rate$を滑らかに更新するためには、非同期的 `updatePlaybackRate()$m ~methodを利用すること。 ◎ To set the 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

取得子は、此れの`再生-状態$に対応する `AnimationPlayState$I 値を返す。 ◎ The play state of this animation.

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

取得子は、此れは次を［ 満たすならば ~T ／ 満たさないならば ~F ］を返す ⇒ ［ `処理待ち再生-~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

取得子は、此れの`現在の準備済み~promise$を返す ◎ Returns the current ready promise for this object.

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

取得子は、此れの`現在の完遂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.

`cancel()@m ◎ void cancel()

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

被呼出時には、次を走らす ⇒ `~animationを取消す$( 此れ ) ◎ by running the cancel an animation procedure for this object.

`finish()@m ◎ void finish()

この~animationを、現在の方向において`~target効果$の終端へ~seekする。 ◎ Seeks the animation to the end of the target effect in the current direction＼

被呼出時には、次を走らす（例外が投出され得る） ⇒ `~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 end time of this animation’s target effect is infinity.

`play()@m ◎ void play()

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

被呼出時には、次を走らす ⇒ `~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＼

被呼出時には、次を走らす ⇒ `~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＼

被呼出時には、次を走らす ⇒ `再生~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＼

被呼出時には、次を走らす： ⇒ `~animationを逆転する$( 此れ ) ◎ using the reverse an animation procedure for this object.＼

`play()$m と同じく，この~methodは~animationの静止-を解くことに加え、~animationが 逆方向への再生-をすでに完遂していた場合は、`~target効果$の始端へ~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 target effect.

enum `AnimationPlayState@I { "`idle@m", "`running@m", "`paused@m", "`finished@m" };

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();
    void `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$secを成す各~propとの対応関係については、その~interfaceを見よ。 ◎ For the correspondance between the members of the returned EffectTiming object and properties of the timing model, see the 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 may differ in the following ways:

• `duration$m1 ⇒ `getTiming()$m は文字列 `auto^l を返すこともある一方で、 `getComputedTiming()$m は — その~memberの定義に述べるように — `反復~所要時間$を表す実数を返さ~MUST。 ◎ duration – while getTiming() may 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 を返さ~MUST。 ◎ fill – likewise, while getTiming() may 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 may 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＼

被呼出時には、次を走らす ⇒ `~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 not present 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? <https://github.com/w3c/csswg-drafts/issues/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@m", "`forwards@m", "`backwards@m", "`both@m", "`auto@m" };

enum `PlaybackDirection@I { "`normal@m", "`reverse@m", "`alternate@m", "`alternate-reverse@m" };

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,
 `KeyframeEffect$mC(
    (`Element$I or `CSSPseudoElement$I)? %target,
    `object$? %keyframes,
    optional (`unrestricted double$ or `KeyframeEffectOptions$I) %options
 ),
 Constructor(`KeyframeEffect$I %source)
]
interface `KeyframeEffect@I : `AnimationEffect$I {
    attribute (`Element$I or `CSSPseudoElement$I)? `target$m;
    attribute `IterationCompositeOperation$I    `iterationComposite$m;
    attribute `CompositeOperation$I             `composite$m;
    sequence<`object$> `getKeyframes$m();
    void             `setKeyframes$m(`object$? %keyframes);
};

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

新たな `KeyframeEffect$I ~objを作成する。 被呼出時には、次を走らす： ◎ Creates a new KeyframeEffect object using the following procedure:

1. %効果 ~LET 新たな `KeyframeEffect$I ~obj ◎ Create a new KeyframeEffect object, effect.
2. %効果 の`~target要素$ ~SET %target ◎ Set the target element of effect to target.
3. %計時~入力 ~LET %options に応じて ⇒＃ `KeyframeEffectOptions$I ~objであるならば %options ／ ~ELSE_ 新たな `EffectTiming$I ~obj（各~memberはそれぞれの既定~値に設定される） ◎ Let timing input be the result corresponding to the first matching condition from below. • If options is a KeyframeEffectOptions object, •• Let timing input be options. • 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. • Otherwise (options is undefined), •• Let timing input be a new EffectTiming object with all members set to their default values.
4. ~IF［ %options は `double^c 型である ］ ⇒ %計時~入力 の `duration$m1 ~SET %options ◎ ↑
5. `~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.

6. ~IF［ %options は `KeyframeEffectOptions$I ~objである ］ ⇒ %効果 の ⇒＃ `iterationComposite$m ~SET %options の `iterationComposite$m1 値, `composite$m ~SET %options の `composite$m1 値 ◎ If options is a KeyframeEffectOptions object, assign the iterationComposite, and composite, properties of effect to the corresponding value from options.

   これらの~propをアテがうときには、 `KeyframeEffect$I ~interface上の対応する設定子~用に定義される~errorの取扱いを適用する 【と記されているが、定義されてない（単に~WebIDLによる既定の挙動に従う？）】。 それらの設定子のどれかが %options が指定する値に対し例外を投出するよう要求する場合、同じ例外が，この手続きから`投出され$~MUST ◎ When assigning these properties, the error-handling defined for the corresponding setters on the KeyframeEffect interface is applied. If any of those setters require an exception to be thrown for the values specified by options, this procedure must throw the same exception and abort all further steps.

7. %効果 用の`~keyframe$が成す集合を，［ %keyframes に`~keyframes引数の処理-法$secを適用した結果 ］で初期化する ◎ Initialize the set of keyframes by performing the procedure defined for setKeyframes() passing keyframes as the input.

%target 引数は［ `~target要素$／~target疑似要素 ］を与える。 また，特定の要素を~targetにしない~animation用には、 ~NULL にされて~MAY。 ◎ (Element or CSSPseudoElement)? target • The target element or target pseudo-element. This may be null for animations that do not target a specific element.

%keyframes 引数は、利用する`~keyframe$の集合を与える。 この引数の形式と処理は、`~keyframes引数の処理-法$secにて定義される。 ◎ 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:

1. %効果 ~LET 新たな `KeyframeEffect$I ~obj ◎ Create a new KeyframeEffect object, effect.
2. %効果 の［ 次に挙げる各~prop ］ ~SET %source の対応する~prop ⇒＃ `~target要素$, `~keyframe$, `反復~組成-演算~型$, `組成-演算~型$ ◎ Set the following properties of effect using the corresponding values of source: • target element, • keyframes, • iteration composite operation, • composite operation, and
3. %効果 の［ 次に挙げる各~計時~prop ］ ~SET %source に指定された対応する~prop ⇒＃ `開始-遅延$, `終止-遅延$, `延伸~mode$, `反復~始端$, `反復~回数$, `反復~所要時間$, `再生~方向$, `計時~関数$ ◎ all specified timing properties: • start delay, • end delay, • fill mode, • iteration start, • iteration count, • iteration duration, • playback direction, and • timing 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 or CSSPseudoElement), nullable

取得子は、此れの`~target要素$を返す。 これは、 ~NULL にもなり得る — 例えば、~audio~APIを利用して音響を生産する~animationなど，特定の要素を~targetにしない~animation。 ◎ The element or pseudo-element being animated by this object. 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.

`iterationComposite@m ◎ iterationComposite, of type IterationCompositeOperation

取得子は、此れの`反復~組成-演算~型$に対応する `IterationCompositeOperation$I 列挙~値を返す。 ◎ The iteration composite operation property of this keyframe effect as specified by one of the IterationCompositeOperation enumeration values.

設定子は、次を走らす ⇒ 此れの`反復~組成-演算~型$ ~SET 所与の値に対応するそれ ◎ On setting, sets the iteration composite operation property of this animation effect to the provided value.

`composite@m ◎ composite, of type CompositeOperation

取得子は、`効果~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たちが成す連列になる： ◎ This section is non-normative ◎ 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";
    CompositeOperation? composite = null;
};

各~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

`計時~関数$を与える — ［ この~keyframeから次t~keyframeまでの，時刻の進捗 ］を変形するために利用される。 ◎ The timing 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効果$に指定された`組成-演算~型$ ］が利用される場合には， ~NULL になる。 ◎ This member will be null if the composite operation specified on the keyframe effect is being used.

`~keyframe$は［ 現在の~WebIDLでは表せない， `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. %~keyframe~list ~LET `欠落~keyframe~offsetを算出する$( この`~keyframe効果$用の`~keyframe$たち ) ◎ Let keyframes be the result of applying the procedure to compute missing keyframe offsets to the keyframes for this keyframe effect.

3. %~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";
           `CompositeOperation$I? `composite@m = null;
      };
      

   2. %出力~keyframe の ⇒＃ `offset$m ~member ~SET %~keyframe の`~keyframe~offset$, `computedOffset$m ~member ~SET %~keyframe の`算出d~keyframe~offset$, `easing$m ~member ~SET %~keyframe の~keyframeに特有の`計時~関数$, `composite$m ~member ~SET %~keyframe の`~keyframeに特有の組成-演算~型$ ◎ Set the offset, computedOffset, easing, and composite members of output keyframe to the respective keyframe offset, computed keyframe offset, keyframe-specific timing function, and keyframe-specific composite operation values of keyframe.

   3. %~keyframe 内に指定された ~EACH( ~animation~property-value~pair %宣言 ) に対し： ◎ For each animation property-value pair specified on keyframe, declaration, 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文字列~値に変換した結果 ◎ 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.
4. ~RET %結果 ◎ Return result.

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

被呼出時には、此れを成す`~keyframe$の集合を，［ `~keyframes引数の処理-法$secに従って， %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";
    CompositeOperation?  composite = null;
};

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 = [];
    (CompositeOperation? or sequence<CompositeOperation?>) composite = [];
};

typedef (sequence<Keyframe> or PropertyIndexedKeyframes) KeyframeArgument;

dictionary `KeyframeEffectOptions@I : `EffectTiming$I {
    `IterationCompositeOperation$I `iterationComposite$m = "replace";
    `CompositeOperation$I          `composite$m = "replace";
};

6.7. `IterationCompositeOperation^I 列挙

`~animation効果$の`反復~組成-演算~型$にアリな値は `IterationCompositeOperation$I 列挙により表現される。 ◎ The possible values of an animation effect’s iteration composite operation are represented by the IterationCompositeOperation enumeration.

enum `IterationCompositeOperation@I {
    "`replace@m",
    "`accumulate@m"
};

`replace^l

`置換-反復~型$の`反復~組成-演算~型$ 値に対応する — 生産される`効果~値$は、`現-反復$に依存しない。 ◎ Corresponds to the replace iteration composite operation value such that the effect value produced is independent of the current iteration.

`accumulate^l

`累積-反復~型$の反復~組成-演算~値に対応する — `~animation効果$の後続の反復は、前回の反復による結果の値~上に築かれる。 ◎ Corresponds to the accumulate iteration composite operation value such that subsequent iterations of an animation effect build on the final value of the previous iteration.

6.8. `CompositeOperation^I 列挙

`~animation効果$の組成の挙動にアリな`組成-演算~型$は、 `CompositeOperation$I 列挙により表現される。 ◎ The possible values of an animation effect’s composition behavior are represented by the CompositeOperation enumeration.

enum `CompositeOperation@I {
    "`replace@m",
	"`add@m",
    "`accumulate@m"
};

`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 ◎ accumulate

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

6.9. `Animatable^I ~interface~mixin

`~animation効果$（ `KeyframeEffect$I ~obj）の`~target要素$になり得る~objは、 `Animatable$I ~interface~mixinを実装する。 ◎ Objects that may 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();
};
dictionary `KeyframeAnimationOptions@I : `KeyframeEffectOptions$I {
    `DOMString$ `id$m = "";
};

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

被呼出時には、次を走らす： ◎ Performs the following steps:

1. %~Realm ~LET 此れに`関連する~Realm$ ◎ ↓
2. %効果 ~LET %~Realm 内で次を走らせて構築される，新たな `KeyframeEffect$I ~obj（例外が投出され得る） ⇒ `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.
3. %~animation ~LET %~Realm 内で次を走らせて構築される，新たな `Animation$I ~obj ⇒ `Animation()$m0 構築子と同じ手続き( %効果, 此れの`~node文書$の`既定の文書~時列線$ ) ◎ Construct a new Animation object, animation, in the relevant Realm of target by using the same procedure as the Animation() constructor, passing effect as the argument of the same name, and the default document timeline of the node document of the element on which this method was called as the timeline argument.
4. %~animation の `id$m1 属性 ~SET %options の `id^m ~member値 ◎ Assign the value of the id member of options to animation’s id attribute.
5. `~animationを再生する$( %~animation, `自動巻戻しあり^i ) ◎ Run the procedure to play an animation for animation with the auto-rewind flag set to true.
6. ~RET %~animation ◎ Return animation.

参考： 次の~code片は： ◎ This section is non-normative ◎ 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. This value is passed to the KeyframeEffect(target, keyframes, options) constructor as the options parameter and has the same interpretation as defined for that constructor.

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

此れを`~target要素$とする `Animation$I ~objのうち，その`~target効果$は［ `事前~相$i／`再生-中$i／`効果~中$i ］にあるものからなる~listを返す。 ◎ Returns the set of Animation objects whose target effect is current or in effect and contains at least one animation effect whose target element is this object.

返される~listは、それらの効果が~targetにしている此れ上の各~propの`効果~stack$にて述べた`組成-順序$を利用して~sortされる。 ◎ The returned list is sorted using the composite order described for the associated animations of effects in §5.5.2 The effect stack.

返される~listは、まだ処理-待ちにある ~animationに対する変更 — ~animationに関係する~style~prop【各種 `animation-*^p, `transition-*^p など】に対する変更など — があれば，それらを適用した後の状態を反映する。 ◎ The returned list reflects the state after applying any pending changes to animation such as changes to animation-related style properties that have yet to be processed.

`KeyframeAnimationOptions$I 上の `id@m1 ~memberは、生成される `Animation$I の `id$m1 属性にアテがう文字列を与える。 ◎ id, of type DOMString, defaulting to "" • The string to assign to the generated Animation's id attribute.

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

`DOM$r に定義される `Document$I には、次の拡張が加えられる。 ◎ The following extensions are made to the Document interface defined in [DOM].

partial interface `Document$I0 {
    readonly attribute `DocumentTimeline$I `timeline$m;
    sequence<`Animation$I> `getAnimations$m();
};

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

取得子は、此れの`既定の文書~時列線$を表現している `DocumentTimeline$I ~objを返す。 ◎ The DocumentTimeline object representing the default document timeline.

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

被呼出時には、 `Animation$I ~objのうち，その`~target効果$は次を満たすものからなる集合を返す ⇒ ［［ `事前~相$i ／ `再生-中$i ／ `効果~中$i ］にある ］~AND［ `~target要素$は此れの`子孫$である ］ ◎ Returns the set of Animation objects that have an associated target effect which is current or in effect and whose target element is a descendant of the document.

返される~listは、それらの効果が~targetにしている要素~上の各~propの`効果~stack$にて述べた`組成-順序$を利用して~sortされる。 ◎ The returned list is sorted using the composite order described for the associated animations of effects in §5.5.2 The effect stack.

返される~listは、まだ処理-待ちにある ~animationに対する変更 — ~animationに関係する~style~prop【各種 `animation-*^p, `transition-*^p など】に対する変更など — があれば，それらを適用した後の状態を反映する。 ◎ The returned list reflects the state after applying any pending changes to animation such as changes to animation-related style properties that have yet to be processed.

［ この~method, `Animatable$I ~interface~mixin上の `getAnimations()$m1 ］の両者とも，前方へ延伸する［ `~animation効果$, それらの`~animation$ ］を維持することを要求するので、前方へ延伸する~animationを何度も生産する文書は，際限なく記憶域を消費することになる。 この定義は、改訂するか（以前までは、これらの~methodは、~animationのうち，`~target効果$が［ `事前~相$iか`再生-中$i ］にあるものしか返さなかった），［ そのような条件の下では、古い~animationを破棄するような，実装~用の抜け道を供する ］必要があろう。 `2054$issue ◎ Both this method and getAnimations() on the Animatable interface mixin require retaining forwards-filling animation effects and their animations such that a document that repeatedly produces forwards-filling animations will consume memory in an unbounded fashion. We may need to revise this definition (previously these methods only returned animations whose target effect was current) or provide a loophole for implementations to discard old animations in such conditions. <https://github.com/w3c/csswg-drafts/issues/2054>

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

`Element$I `DOM$r は、~animationの~targetになり得るので、その~interfaceは，次のように拡張される： ◎ Since DOM Elements may 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. `CSSPseudoElement^I ~interfaceに対する拡張

疑似要素も`~keyframe効果$の~targetになり得るので、 `CSSPseudoElement$I ~interface `css-pseudo-4$r も~animate可能であるものと定義される： ◎ Since keyframe effects may also target pseudo-elements, the CSSPseudoElement interface [css-pseudo-4] is also defined to be animatable.

`CSSPseudoElement$I includes `Animatable$I;

6.13. `AnimationPlaybackEvent^I ~interface

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

[`Exposed$=Window,
 `AnimationPlaybackEvent$mC(`DOMString$ %type, optional `AnimationPlaybackEventInit$I %eventInitDict)]
interface `AnimationPlaybackEvent@I : `Event$I {
    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)@m ◎ 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

取得子は、この~eventを生成した`~animation$の［ ~eventが~queueされた~momentにおける，`現-時刻$ ］を返す。 これは、~eventが生成された時点で`~animation$は`遊休中$iであった場合には ~NULL になる。 ◎ The current time of the animation that generated the event at the moment the event as queued. This will be null if the animation was idle at the time the event was generated.

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

取得子は、この~eventを生成した`~animation$の［ ~eventが~queueされた~momentにおける，`時列線~現-時刻$ ］を返す。 ◎ 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.14. ~modelの~live性

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