CSS Animations Level 2 （日本語訳）

◎要約

この~CSS~moduleは、作者が，~keyframeを利用して~CSS~propの値を時間とともに~animateする仕方を述べる。これらの~keyframe~animationの挙動は［所要時間, 繰返す回数, 繰返しの挙動］を指定することにより制御できる。 ◎ This CSS module describes a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior.

~CSSisaLANG

1. 差分~仕様

これは差分~仕様であり、現時点の ~level 1 仕様 `CSS3-ANIMATIONS$r からの相違点のみを包含する。 ~level 1 仕様が完了-間近になったときは、それとこの差分は，完全な~level 2 仕様として併合されることになる。【したがって，以下に現れる “この仕様に定義される…” 等々の句は、~level 1 仕様も包摂する。】 ◎ This is a delta specification, meaning that it currently contains only the differences from CSS Animations Level 1 [CSS3-ANIMATIONS]. Once the Level 1 specification is closer to complete, it will be merged with the additions here into a complete level 2 specification.

2. ~animation

この仕様に定義される各種~animation~propに対し，変化が生じたときは、［対応する `CSSAnimation$I ~obj, それに結付けられた各種~obj ］も更新される — これらの~propと~WAnimの各種~概念との対応関係は、 `§ ~keyframeの組立-法＠#keyframes$ に則って定義される。 ◎ Changes to any of the animation properties defined in this specification cause the corresponding CSSAnimation object and its associated objects to be updated according to the correspondence between these properties and Web Animations concepts defined in § 3 Assembling Keyframes.

しかしながら，作者が~WAnim~APIを利用して当の~animationを改変した場合、 ~APIによる変更が以下に従うように優先される — 以下における %~animation は［当の~animation, またはそれを表現する `CSSAnimation$I ~obj ］, %~keyframe効果は［ %~animation に結付けられた `KeyframeEffect$I ~obj 【すなわち， %~animation に`結付けられた効果$を表現する `AnimationEffect$I ~obj】］を指すとする： ◎ However, if the author modifies the animation using the Web Animations programming interface, the changes from the programming interface take precedence as follows:

%~keyframe効果に対し `setKeyframes()$m が成功裡に~callされて以降は、 %~keyframe効果の`~target要素$用の［【その引数に】合致している `keyframes$at 規則／ `animation-timing-function$p ~propの`解決d値$ ］を変更しても， %~animation には反映されなくなる。 ◎ After a successful call to setKeyframes() on the KeyframeEffect associated with a CSSAnimation, any subsequent change to matching @keyframes rules or the resolved value of the animation-timing-function property for the target element will not be reflected in that animation.

ただし，合致している最後の `keyframes$at 規則が除去された場合、 %~animation は依然として取消されるモノトスル。 ◎ However, if the last matching @keyframes rule is removed the animation must still be canceled.
%~keyframe効果に対し `updateTiming()$m が成功裡に~callされて以降は、［その %timing ~parameter に渡された `OptionalEffectTiming$I 辞書【！%timing:~WANIM#dom-animationeffect-updatetiming-timing-timing】］内に在る各~memberに対応する~animation~propを変更しても， %~animation には反映されなくなる。 ◎ After a successful call to updateTiming() on the KeyframeEffect associated with a CSSAnimation, for each property included in the timing parameter, any subsequent change to a corresponding animation property will not be reflected in that animation.

例えば， `cssAnimation.effect.updateTiming({ duration: 1000 })^c を~callした場合、 `animation-duration$p を変更しても無視されるようになる一方， `animation-delay$p に対する変更は依然として %~keyframe効果の計時に反映されることになる。 ◎ For example, calling cssAnimation.effect.updateTiming({ duration: 1000 }) would cause subsequent changes to animation-duration to be ignored whilst changes to animation-delay would still be reflected in the KeyframeEffect's timing.
%~animation に対し，次のいずれかが生じたならば、それ以降は， `animation-play-state$p を変更しても — § `animation-play-state^p ~prop に定義されるとおり — %~animation は［再生-／静止- ］されなくなる： ◎ ↓
- ［ `play()$m ／ `pause()$m ］が成功裡に~callされた ◎ After a successful call to play() or pause() on a CSSAnimation, any subsequent change to the animation-play-state will no longer cause the CSSAnimation to be played or paused as defined in § 4.5 The animation-play-state property.
- ［ `reverse()$m が成功裡に~callされた／ `startTime$m が成功裡に設定された］結果として、 %~animation の`再生-状態$が，他から`静止中$iに, またはその逆に変化した ◎ After a successful call to reverse() on a CSSAnimation or after successfully setting the startTime on a CSSAnimation, if, as a result of that call the play state of the CSSAnimation changes to or from the paused play state, any subsequent change to the animation-play-state will no longer cause the CSSAnimation to be played or paused as defined in § 4.5 The animation-play-state property.
  
  【！ class="note" 追加】変化の要件を`静止中$iとの行き来に限ることは、次を確保する ⇒ %~animation が`稼働中$iにあるときは、 `reverse()$m を~callしても, `startTime$m を設定しても， %~animation は `animation-play-state$p における変化を観測し続ける ◎ The requirement for a change to or from the paused play state ensures that even after calling reverse() or setting the startTime on a running animation, the animation continues to observe changes in animation-play-state.
%~animation の `effect$m が［ ~NULL ／ %~keyframe効果以外の何らかの `AnimationEffect$I ］に成功裡に設定されて以降は、［ `animation-name$p, `animation-play-state$p ］以外の各種~animation~propを変更しても， %~animation には反映されなくなる。同様に，合致している `keyframes$at 規則に対する変更も， %~animation には反映されなくなる。ただし，最後に合致している `keyframes$at 規則が除去された場合、 %~animation は依然として取消されるモノトスル。 ◎ After successfully setting the effect of a CSSAnimation to null or some AnimationEffect other than the original KeyframeEffect, all subsequent changes to animation properties other than animation-name or animation-play-state will not be reflected in that animation. Similarly, any change to matching @keyframes rules will not be reflected in that animation. However, if the last matching @keyframes rule is removed the animation must still be canceled.

注記：上の規則における “成功裡” （に~callされた, 等）は、次を確保するために必要yである ⇒ 当の~methodや設定子から例外が投出されたときは、それらによる［挙動の上書き］は`適用されない^em ◎ Note, the reference to a successful call in the above rules is necessary to ensure that when an exception is thrown by any of these methods, the override behavior is not applied.

2.1. 所有している要素

`animation-name$p ~propが適用され，~animationを生成した［要素／疑似要素］は、その~animationを `所有している要素@ と呼ばれる。 ◎ The owning element of an animation refers to the element or pseudo-element to which the animation-name property was applied that generated the animation.

所与の要素 %要素に対し： ◎ ↓

%要素の `display$p ~propが `~none1$v に設定されたときは ⇒ %要素の `display$p の`算出d値$が［ `~animation出自$, `遷移~出自$ ］を無視したときに `~none1^v になる場合 ⇒ 稼働中の~animationのうち，次を満たすものは、終了することになる ⇒ それを`所有している要素$ ~EQ %要素 ◎ If the display property of an element is set to none and its display value would compute to none when ignoring the Transitions and Animations cascade origins, then terminate running animations with this owning element.＼
%要素の `display$p の`算出d値$は［ `~animation出自$, `遷移~出自$ ］を無視したときに `~none1$v になる下で ⇒ %要素の `display$p が `~none1^v からそれ以外の値に更新されたときは ⇒ `animation-name$p ~propにより %要素に適用される~animationを開始させることになる。 ◎ If an element has a display of none and its display value had computed to none when ignoring the Transitions and Animations cascade origins, updating display to a value other than none will start all animations applied to the element by the animation-name property.

注記：実施においては、このことは次を意味する ⇒ `display$p 用の値 `~none1$v への~animationは、当の~styleが~animationの効果を伴わない下でも `none^v に算出される場合を除き，稼働中の各~animationを終了させない。 ◎ Note: In practice, this means that an animation to a display value of none will not terminate running animations unless the style also computes to none without the effect of the animations.

~animationが［この仕様が定義する~markup【すなわち，各種~animation~prop宣言】を利用して生成されていて、それを`所有している要素$の `animation-name$p ~propの算出d値が後で更新されたことにより，その~markupから切離された］場合、 ~animationは，`所有している要素$から切離される（すなわち、それ以降，~animationを所有している要素は無い）。 ◎ If an animation generated using the markup defined in this specification is later disassociated from that markup by an update to the computed value of the animation-name property on the owning element, the animation is disassociated from its owning element (that is, it has no owning element from that point forwards).

注記：下の例においては、要素 %elem が初期~時の［ %animation を`所有している要素$ ］になる。 %animation は、 %elem の `animation-name$p ~propの算出d値に対する更新-を通して， %elem から切離される。 ◎ In the example below, animation’s initial owning element is elem. animation is disassociated from element through an update to the computed value of elem’s animation-name property.

%elem.style.animation = 'spin 1s';
let %animation = %elem.getAnimations()[0]; /* 
%animation を所有している要素は %elem
◎
animation’s owning element is elem
 */
%elem.style.animation = ''; /* 
%animation を所有している要素は もはや無い
◎
animation no longer has an owning element
 */

~animationを`所有している要素$は、［ ~animationに`結付けられた効果$の`~target要素$ ］に等しくなることが多いが，常にそうなるとは限らないことに注意。この 2 つの要素が相違し得る状況を，次の例にデモる。 ◎ Note that although the owning element is often equal to the target element of an animation’s associated effect, this is not always the case. The following example demonstrates some of the situations where these two elements may differ.

%elem.style.animation = 'move 1s';
let %animation = %elem.getAnimations()[0];
/* 
%animation.`effect.target^c ~EQ %elem ~EQ %animation を所有している要素
◎
animation.effect.target == elem == animation’s owning element
 */

%animation.effect.target = elem2;
/* 
%animation.`effect.target^c ~EQ %elem2 ~NEQ %animation を所有している要素
◎
animation.effect.target == elem2 != animation’s owning element
 */

%animation.effect = null;
/* 
%animation.`effect【！?】.target^c ~EQ undefined ~NEQ %animation を所有している要素
◎
animation.effect?.target is undefined != animation’s owning element
 */

2.2. ~animationの組成-順序

~markupや~interfaceから生成された`~animation$が属する`~animation~class$は、 `~CSS~animation^i とする。 ◎ Animations generated from the markup defined in this specification have an animation class of ‘CSS Animation’.

【そのような~animationも、単に “`~CSS~animation^i （ `CSS Animation^en ）” と称される。また，以下に現れる “`~CSS遷移^i（ `CSS Transition^en ）” は、 `CSS3-TRANSITIONS$r に定義される~animation／それらが属する`~animation~class$を表す。】

`~CSS~animation^i の`組成-順序$は：

`所有している要素$が在るものは、 `~CSS遷移^i よりも後, かつ［特定の`~animation~class$に属さない~animation ］よりも前とする。 ◎ CSS Animations with an owning element have a later composite order than CSS Transitions but an earlier composite order than animations without a specific animation class.
`所有している要素$が在るものどうしは、次に従って~sortする： ◎ Within the set of CSS Animations with an owning element, two animations A and B are sorted in composite order (first to last) as follows:
- (A) `所有している要素$が相違するものどうしは、 `所有している要素$の`~tree順序$に従う。 ◎ If the owning element of A and B differs, sort A and B by tree order of their corresponding owning elements.＼
- 同じ %要素を`出自の要素$とする疑似要素どうしは、次に挙げる順に~sortする ⇒＃ %要素, `marker^pe, `before^pe, ここでは特定的に言及されない他の疑似要素 — ~Unicode符号位置の昇順で, `after^pe, %要素の子 ◎ With regard to pseudo-elements, the sort order is as follows: • element • ::marker • ::before • any other pseudo-elements not mentioned specifically in this list, sorted in ascending order by the Unicode codepoints that make up each selector • ::after • element children
- (B) `所有している要素$も同じものどうしは、各~animationの名前【 `animationName$m 】が，要素~上の `animation-name$p ~propの算出d値に現れる順に~sortする。 ◎ Otherwise, sort A and B based on their position in the computed value of the animation-name property of the (common) owning element.
ただし，［ `~animation~event＠#events$どうしを~sortするために`組成-順序$を決定する目的］においては、［ 2 つの~animation~eventどちらかは `animationcancel$et ~eventである所］では，それらを生成した `~CSS~animation^i（たち）を~sortする際には： ◎ When determining the composite order in order to sort animation events where either or both of the events is an animationcancel event, treat the CSS Animation(s) for which the animationcancel event was generated＼
- (A) においては ⇒ それらを`所有している要素$には、当の `~CSS~animation^i が取消された時点に利用-中にあったそれらを利用する。 ◎ as having an owning element corresponding to the owning element in use at the moment when the CSS Animation was cancelled.＼
- (B) においては ⇒ `animation-name$p ~propの算出d値には、当の `~CSS~animation^i が取消された時点に効果があったそれを利用することに加え，取消された~animationは取消されなかった~animationより前に~sortする。 ◎ Furthermore, use the position of the animation in the animation-name property in effect at the time when the CSS Animation was cancelled＼ sorting such that positions of cancelled animations sort before positions of animations that have not been cancelled.
`所有している要素$が無いものどうしの順序は、それらが`大域~animation~list$に現れる順に従う。 ◎ ↑↑ The composite order of CSS Animations without an owning element is based on their position in the global animation list.

これは、遷移~用に定義された挙動から相違する。おそらく，［遷移, ~animation, 大域~animation~list ］の順に~sortするベキである。その理由は、開発者~tool等々が［孤立な~animationや遷移を再生し直すために，それらを追い続ける］とき，それらが概ね同じ`組成-順序$を保守するベキであることによる。 ◎ This differs from the behavior defined for transitions. We should probably sort transitions first, then animation, then use the global animation list. The reason being that when developer tools etc. hang on to orphaned animations and transitions in order to replay them, they should maintain roughly the same composite order.

この仕様が定義する~markupを利用して生成された `~CSS~animation^i は、作成された時点では，`大域~animation~list$に`追加されない^em。代わりに，これらの各~animationは、［それを`所有している要素$から切離された後，`遊休中$iにある間］は `組成-順序$は定義されず，他へ遷移した最初の~momentで`大域~animation~list$に付加される。 ◎ CSS Animations generated using the markup defined in this specification are not added to the global animation list when they are created. Instead, these animations are appended to the global animation list at the first moment when they transition out of the idle play state after being disassociated from their owning element. CSS Animations that have been disassociated from their owning element but are still idle do not have a defined composite order.

注記：この挙動は、 `所有している要素$から切離された~animationは，常に`遊休中$iになる（新たにそうなるか，そうであり続ける）事実に依拠する。 ◎ Note, this behavior relies on the fact that disassociating an animation from its owning element always causes it to enter (or remain) in the idle play state.

3. ~keyframeの組立-法

3.1. ~keyframeの宣言-法： `keyframes$at 規則

`CSS3-ANIMATIONS$r `§ ~keyframeの宣言-法＠~CSSANIM#keyframes$ を見よ。 ◎ See CSS Animations 1 § 3 Declaring Keyframes.

3.2. ~keyframeの処理-法

`~target要素$（または疑似要素） %要素の［各種 `animation-*^p ~propが成す`協調される値~list$ ］を成す［ %N 個目の~itemにより定義される~animation効果］に結付けられる`~keyframe$たちは，次に従って生成される： ◎ For each animation effect defined by the Nth item in the coordinated value list of the animation-* properties on target (pseudo-)element element, its associated keyframes are generated as follows:

【明確化するため、この訳では， `INFRA$r に定義される各種~data型も利用する。】

（この段は、既定の値を設定する）： ◎ Set Defaults:
- %既定の計時~関数 ~LET ［ %要素の `animation-timing-function$p ~propの`算出d値$ ］を成す，対応している値
  
  【 `協調される値~list$は，使用~値に基づいて定義されているので、 “対応している値” は，［それが算出d値に基づいて定義されていた］かのように解釈し直す下での， %N 個目の成分を表す（次項も同様）。】
  ◎ Let default timing function be the corresponding computed value of animation-timing-function on element.
- %既定の組成法 ~LET ［ %要素の `animation-composition$p ~propの`算出d値$ ］を成す，対応している値 ◎ Let default composite be the corresponding computed value of animation-composition on element.
- %~keyframe群 ~LET 新たな`~list$【！連列】
  
  この~listを成す各~item【！~obj】は、次に挙げるものからなる`構造体$であり，ある`~keyframe$を表現する：
  - `~offset@kF ⇒ `~keyframe~offset$を与える
  - `計時~関数@kF ⇒ `計時~関数$を与える
  - `組成法@kF ⇒ `組成-演算~型$を与える
  - `値~群@kF ⇒ この~keyframeにより~animateされる各（非~略式）~propの名前を値に対応付ける`~map$
    
    【これは，原文では値たちが成す集合として記されているが、実質的には~prop名も含まれるので，`~map$に改める（順序は有意でない）。】
  【各~itemに与えた記述は、この訳による補完。】【これらの~itemは，原文では変数として~mark-upされているが、 ~keyframeごとに異なる~instanceを成すので，このように改める。】
  ◎ Let keyframes be an empty sequence of keyframe objects, each possessing a keyframe offset, keyframe timing function, keyframe composite, and keyframe values.
- %~animateされる~prop群 ~LET 空な集合（この集合は、 ~CSS~prop名たちからなる。） ◎ Let animated properties be an empty set of CSS property names.
- %~keyframe規則 ~LET ε ◎ ↓↓
- %初期~keyframe ~LET ε ◎ ↓↓
- %最終-~keyframe ~LET ε ◎ ↓↓
（この段は、利用する `keyframes$at ~at-規則を決定する）：
1. %規則~名 ~LET ［ %要素の `animation-name$p ~propの`算出d値$ ］を成す，対応している値
2. ~IF［ %規則~名 ~NEQ `none＠~CSSANIM#valdef-animation-name-none$v ］ ⇒ %~keyframe規則 ~SET 次を満たす `keyframes$at ~at-規則は［在るならば，それらのうち文書~順序で最後のもの／無いならば ε ］ ⇒ その導入部を成す `keyframes-name$t は %規則~名に合致している
3. ~IF［ %~keyframe規則 ~EQ ε ］ ⇒ ~RET
  
  この事例では、 ~animationは生成されず， %規則~名に合致している既存の~animationも取消される。
◎ ↓↓ Collect Declared Keyframes: • Find the last @keyframes at-rule in document order with <keyframes-name> matching the corresponding animation-name value name. ◎ • If there is no @keyframes at-rule with <keyframes-name> matching name (or if name is none), abort this procedure. In this case no animation is generated, and any existing animation matching name is canceled.
%~keyframe~block群 ~LET ［ %~keyframe規則を成す `keyframe-block$t たち］が成す文書~順序による`~list$ ◎ ↓
%~keyframe~block~map ~LET 新たな`~map$ ◎ ↓
（この段は、宣言された~keyframeたちを~offset別に~group化する。）

%~keyframe~block群を成す ~EACH( %~block ) に対し：
1. %~block の導入部にて指定された【！指定d値】 ~EACH( `keyframe-selector$t %~offset ) に対し：
  1. %~offset ~SET %~offset が表現する`~offset$kF — ~keyword［ `form^v ／ `to^v ］は［ `0%^v ／ `100%^v ］として扱う
  2. ~IF［ %~keyframe~block~map[ %~offset ] ~EQ ε ］ ⇒ %~keyframe~block~map[ %~offset ] ~SET 新たな`~list$
  3. %~keyframe~block~map[ %~offset ] に %~block を`付加する$
【 %~keyframe~block~map における~keyの同等性は， `~offset$kFの同等性に基づくが、それは，実装がそれ用に格納する~dataの精度に依存する（極めて近い数（例： `0%^v と `0.000000001%^v ）が同じ~offsetと見なされるかどうかは、実装依存になる）。】【 `~offset$kFを与える `keyframe-selector$t がとり得る値は、他の~moduleにより拡げられている（例： `timeline-range-name$t ） — それらの新たな値で表現される~offsetは、従来の値で表現される~offsetとは別個なものと見なされよう（少なくとも，この~algoの目的においては）。】
◎ Group together all keyframe blocks that share the same specified <keyframe-selector> (treating from as 0% and to as 100%),＼
【この段は、以降を簡素化するための，この訳による追加：】
1. ~IF［ %~keyframe~block~map[ 0% ] ~EQ ε ］ ⇒ %~keyframe~block~map[ 0% ] ~SET « 空な~block »
2. ~IF［ %~keyframe~block~map[ 100% ] ~EQ ε ］ ⇒ %~keyframe~block~map[ 100% ] ~SET « 空な~block »
◎ ↓
（この段は、各~keyframe内の宣言たちを収集する。）

%~keyframe~block~map を成す ~EACH( %~offset → %~block群 ) に対し：
1. %最後に宣言された計時~関数 ~SET %既定の計時~関数
2. %最後に宣言された組成法 ~SET %既定の組成法
3. %~block群を成す ~EACH( %~block ) に対し：
  1. ~IF［ %~block 内に `animation-timing-function$p は宣言されている］ ⇒ %最後に宣言された計時~関数 ~SET %~block 内で最後に宣言された `animation-timing-function$p の`算出d値$
  2. ~IF［ %~block 内に `animation-composition$p は宣言されている］ ⇒ %最後に宣言された組成法 ~SET %~block 内で最後に宣言された `animation-composition$p の`算出d値$
4. %値~群 ~LET 新たな`~map$
5. 【！~TR/CSS21/syndata.html#x14】【！宣言~block~CSSOM1#css-declaration-block】 %~block群を成す~blockたちに`~cascade$を適用する `CSS-CASCADE-4$r — ここでは ⇒＃ %~block群の順序（すなわち，文書~順序）で最も後に宣言された~prop宣言が優先されることになる。 “~animate不可” とされた~propは無視する。
  
  その結果を成す ~EACH( `宣言d値$ %値 ) に対し ⇒ %値~群[ %値を与えた~CSS~propの名前 ] ~SET %値
  
  注記： `~cascade$は、［各`略式~prop$をその`下位prop$に展開する］ことに加え［ %要素の【！`算出d$】`書字~mode$に則って，各`論理-~prop~group$内の対応する~prop~pairを一緒に対応付ける］ことになる。
6. %~keyframe ~LET 次を伴う新たな~keyframe~obj ⇒＃ `~offset$kF ~SET %~offset, `計時~関数$kF ~SET %最後に宣言された計時~関数, `組成法$kF ~SET %最後に宣言された組成法, `値~群$kF ~SET %値~群
7. %~keyframe群に %~keyframe を`付加する$
8. %~animateされる~prop群に %値~群を成す各~propの名前を追加する
9. ~IF［ %~offset ~EQ 0% ］ ⇒ %初期~keyframe ~SET %~keyframe
10. ~IF［ %~offset ~EQ 100% ］ ⇒ %最終-~keyframe ~SET %~keyframe
◎ last declared animation-timing-function computed value (defaulting to default timing function if there is no such declaration), and last declared animation-composition computed value (defaulting to default composite if there is no such declaration). ◎ For each such group of matching keyframe blocks, ordered by their earliest keyframe block in the sorted order: ◎ Cascade together all of its declaration blocks such that for each CSS property (except those that are “not animatable”, which must be ignored) the last declaration among all its keyframe blocks takes precedence. [CSS-CASCADE-4] ◎ Note: The cascade will expand shorthand properties into their sub-properties and map together corresponding property pairs in each logical property group according to the element’s computed writing mode. ◎ Append to keyframes a new empty keyframe keyframe with the group’s keyframe offset, keyframe timing function, and keyframe composite. Give its keyframe values the set of declared values resulting from this cascade. ◎ Add each property name that was added to its keyframe properties to animated properties.
（この段は、［ 0% ／ 100% ］~keyframeに指定されなかった値を追加する）：

« %初期~keyframe, %最終-~keyframe » を成す ~EACH( %初期または最終-~keyframe ) に対し：
1. %~animateされる~prop群を成す ~EACH( %~prop ) に対し：
  1. ~IF［ %初期または最終-~keyframe の`値~群$kF[ %~prop ] ~NEQ ε ］ ⇒ ~CONTINUE
  2. %~keyframe群を成す ~EACH( %~keyframe ) に対し：
    1. ~IF［ %~keyframe の`値~群$kF[ %~prop ] ~EQ ε ］ ⇒ ~CONTINUE
    2. ~IF［ ~OR↓ ］…
      - ［ %初期または最終-~keyframe ~EQ %初期~keyframe ］~AND［ %~keyframe は， `使用~keyframe順序$においては %初期~keyframe より前に位置する］
      - ［ %初期または最終-~keyframe ~EQ %最終-~keyframe ］~AND［ %~keyframe は， `使用~keyframe順序$においては %最終-~keyframe より後に位置する］
      …ならば ⇒ %初期または最終-~keyframe の`値~群$kF[ %~prop ] ~SET %要素上での %~prop の`算出d値$
2. ~IF［ %初期または最終-~keyframe の`値~群$kFは空である］ ⇒ %~keyframe群から %初期または最終-~keyframe を除去する
◎ Generate Initial and Final Frames: • Find or create the initial keyframe, a keyframe with a keyframe offset of 0%, default timing function as its keyframe timing function, and default composite as its keyframe composite. • For any property in animated properties that is not otherwise present in a keyframe with an offset of 0% or one that would be positioned earlier in the used keyframe order, add the computed value of that property on element to initial keyframe’s keyframe values. • If initial keyframe’s keyframe values is not empty, prepend initial keyframe to keyframes. • Repeat for final keyframe, using an offset of 100%, considering keyframes positioned later in the used keyframe order, and appending to keyframes.
（この段は、 ~keyframeたちを~sortする）： ◎ Sort Frames:
- %~keyframe群の `指定d~keyframe順序@ は、上の手続きによる結果の順序である（すなわち、文書~順序 — 同じ`~offset$kFを伴う~keyframeたちは、それらのうち最初に位置する~keyframeに縮約される）。 ◎ The specified order of keyframes is the order resulting from the steps above, i.e. document order with duplicate keyframes collapsed to the earliest position.
- %~keyframe群の `算出d~keyframe順序@ は、 `getKeyframes()$m により返される順序であり，次により見出される ⇒ ~keyframeのうち［その`~offset$kFが［ `percentage$t ／ `from^v ／ `to^v ］で指定されたもの† ］を~listの先頭へ移した上で，【！上で生成され得る %初期~keyframe も含む】それらの~keyframeに対し`~offset$kFによる安定-~sortを遂行する
  
  【† この~moduleに限れば，（これを書いた時点では）すべての~keyframeが該当するが、それ以外の~keyframeも存在し得る（下の注記）。】
  ◎ The computed order of keyframes—which is the order returned by getKeyframes()—is found by shifting any keyframes whose offset was specified as a <percentage>, from keyword, or to keyword to the front of the list (after the generated initial keyframe, if any), and performing a stable sort on these keyframes by their keyframe offsets.
- %~keyframe群の `使用~keyframe順序@ は、実際の~animation~frameを補間して算出するために利用される順序であり，次により見出される ⇒＃ %~keyframe群を成す各~keyframeを~animation効果の時列線に付する, `反復~回数$ ~EQ 1 と見做す, 早いもの順にする, `算出d~keyframe順序$を利用して `ties^en を分断する
  
  【これらが何を意味するか知るには、他の~module — `SCROLL-ANIMATIONS-1$r, `WEB-ANIMATIONS$r, `WEB-ANIMATIONS-2$r など — を調べる必要がある。】
  ◎ The used order of keyframes—which is the order used to interpolate and compute the actual animation frames—is found by attaching the keyframes onto the animation effect’s timeline assuming an iteration count of 1 and ordering them from earliest to latest, breaking ties by using the computed keyframe order.
この仕様により導入された［算出d~keyframeたちの~sort法／使用~keyframeたちの~sort法］に対する特有な要件は、 `WEB-ANIMATIONS$r ［ `§ 算出d~keyframeの計算-法＠~WANIM#calculating-computed-keyframes$／ `§ ~keyframe効果の効果~値＠~WANIM#the-effect-value-of-a-keyframe-animation-effect$ ］の中へ統合されるべきである。上の記述 — これらの~keyframeたちが成す集合どうしの区別 — は、規範的でない注記へ移動されるべきである。 ◎ Any specific requirements on sorting computed keyframes introduced by this spec should be integrated into Web Animations § 5.3.3 Calculating computed keyframes. Any specific requirements on used keyframes introduced by this spec should be integrated into Web Animations § 5.3.4 The effect value of a keyframe effect. The above description of the distinction between these sets of keyframes should be moved to an informative note.

注記： ~keyframeたちの`算出d~keyframe順序$は、 `percentage$t ~offsetで~sortされるが，［ `timeline-range-name$t で指定される~keyframeたちの`指定d~keyframe順序$ ］を保守する — それらが`使用~keyframe順序$では，より後に来る場合でも，（生成された 100% ~keyframe 以外の）他の `percentage$t ~keyframeよりも後になるよう。 ◎ Note: Although the computed keyframe order sorts keyframes with <percentage> offsets, it maintains keyframes specified with a <timeline-range-name> in their specified keyframe order—after any <percentage> keyframes (other than a generated final keyframe), even if these come later in the used keyframe order.

4. ~animationの宣言-法

`~CSS~animation^i は、［各種 `animation-*^p ~propを利用して，~keyframeを要素に束縛する］ことにより，定義される。これらの~list値をとる~prop — `animation$p `略式~prop$の`下位prop$すべて — は、 `協調している~list~prop~group$を形成する。 `animation-name$p が，`協調している基底~list~prop$になり、 `協調される値~list$を成す各~itemは， 1 個の~animation効果の~prop群を定義する。 ◎ CSS Animations are defined by binding keyframes to an element using the animation-* properties. These list-valued properties, which are all longhands of the animation shorthand, form a coordinating list property group with animation-name as the coordinating list base property and each item in the coordinated value list defining the properties of a single animation effect.

個々の `animation-*^p ~propの値どうしがどう協調するかについては、 `CSS-VALUES-4$r `§ 協調している~list値をとる~prop群＠~CSSVAL#linked-properties$ を見よ。 ◎ See CSS Values 4 § A Coordinating List-Valued Properties for how the individual animation-* property values coordinate.

4.1. `animation-duration^p ~prop

◎名 `animation-duration@p ◎値 [ `~auto0$v | `time[0s,∞]$t ]# ◎初 `~auto0$v ◎適すべての要素 ◎継されない ◎百受容しない ◎算［ `time$t ／~keyword `~auto0$v ］たちが成す~list ◎ list, each item either a time or the keyword auto ◎順文法に従う ◎ア ~animate不可 ◎表終

`animation-duration$p は、当の`~animation$に`結付けられた効果$の`反復~所要時間$を指定する。 ◎ The animation-duration property specifies the iteration duration of the animation’s associated animation effect.

`~auto0@v: 時間~駆動な~animation用には、 `0s^v と等価。 ◎ For time-driven animations, equivalent to 0s.; `~scroll駆動な~animation$用には、［ `animation-range$p, `animation-delay$p, `animation-iteration-count$p ］も考慮に入れる下で［当の時列線を延伸するために必要yな所要時間］と等価。 `SCROLL-ANIMATIONS-1$r `§ 有限な時列線の計算＠~SCROLL-ANIM#finite-attachment$ を見よ。 ◎ For scroll-driven animations, equivalent to the duration necessary to fill the timeline in consideration of animation-range, animation-delay, and animation-iteration-count. See Scroll-driven Animations § 4.1 Finite Timeline Calculations.
`time[0s,∞]$t: 時間~駆動な~animation用には、 ~animationが 1 周回を完了するまにかかる時間の長さを指定する。負な `time$t は無効。 ◎ For time-driven animations, specifies the length of time that an animation takes to complete one cycle. A negative <time> is invalid.; `~scroll駆動な~animation$用には、 `~auto0$v として扱われる。 ◎ For scroll-driven animations, treated as auto.

`animation-duration$p の`使用~値$が `0s^v になる場合でも、当の~animation自体は（瞬間的に）生じる — それに伴い： ◎ If the used animation-duration is 0s, the animation itself still occurs (instantaneously).＼

［ `animationend$et, `animationstart$et【！start and end】］~eventも発火される。 ◎ The animation’s start and end events are still fired.＼
`animation-fill-mode$p に応じて：［ `backwards$v ／ `forwards$v ／ `both$v ］の場合、当の~animationの［最初の~frame／最後の~frame／最初と最後の~frame ］が `animation-delay$p 【による遅延~期間】の［間／後／間と後］に（ `animation-direction$p にて定義されるとおり）表示されることになる。 `~none0$v の場合、当の~animationの~keyframeによる目に見える効果は無い。 ◎ If animation-fill-mode is set to backwards or both, the first frame of the animation (as defined by animation-direction) will be displayed during the animation-delay; and if animation-fill-mode is set to forwards or both, the last frame of the animation (as defined by animation-direction) will be displayed after the animation-delay. However, if animation-fill-mode is set to none the keyframes of the animation animation will have no noticeable effect.

`~level 1$ との後方-互換性を得るため、 `animation-timeline$p の`算出d値$が `auto$v になる場合（すなわち、 ~listを成す値は 1 個の `auto^v のみである）、 `animation-duration$p 用の値 `~auto0$v の`解決d値$は，その`使用~値$が `0s^v になるときは `0s^v になるとする。 ◎ For backwards-compatibility with Level 1, when the computed value of animation-timeline is auto (i.e. only one list value, and that value being auto), the resolved value of auto for animation-duration is 0s whenever its used value would also be 0s.

4.2. `animation-timing-function$p ~prop

`animation-timing-function$p は、各`~keyframe$に適用される`計時~関数$を — `§ ~keyframeの組立-法＠#keyframes$ にて定義されるとおり — 決定するために利用される。 ◎ The animation-timing-function is used to determine the timing function applied to each keyframe as defined in § 3 Assembling Keyframes.

4.3. `animation-iteration-count$p ~prop

`animation-iteration-count$p は、当の`~animation$に`結付けられた効果$の`反復~回数$を指定する。 ◎ The animation-iteration-count property specifies the iteration count of the animation’s associated animation effect.

4.4. `animation-direction$p ~prop

`animation-direction$p は、当の`~animation$に`結付けられた効果$の`再生~方向$を指定する。 ◎ The animation-direction property specifies the playback direction of the animation’s associated animation effect.

4.5. `animation-play-state$p ~prop

`animation-play-state$p は、当の`~animation$を［静止する／再生する］ために利用される。 ◎ The animation-play-state is used to pause or play the animation.

実装は、どの時点であれ — 当の~animationが最初に生成されたときも含め — 所与の ( `~animation$ %~animation ) に対応する `animation-play-state$p の`解決d値$が新たに： ◎ ↓

`running$v になったときは，次を走らすモノトスル ⇒ `~animationを再生する$( %~animation, `自動で巻戻す^i ) ◎ If at any time, including when the animation is first generated, the resolved value of animation-play-state corresponding to an animation is newly running, the implementation must run the procedure to play an animation for the given animation with the auto-rewind flag set to false.
`paused$v になったときは，次を走らすモノトスル ⇒ `~animationを静止する$( %~animation ) ◎ If at any time, including when the animation is first generated, the resolved value of animation-play-state corresponding to an animation is newly paused, the implementation must run the procedure to pause an animation for the given animation.

上の要件は、 ~animationの`再生-状態$が — `§ ~animation＠#animations$ にて述べられるとおり — ~WAnim~APIにより上書きされている場合には，適用されない。 ◎ The above requirements do not apply if the animation’s play state is being overridden by the Web Animations API as described in § 2 Animations.

4.6. `animation-delay$p ~prop

`animation-delay$p は、当の`~animation$に`結付けられた効果$の`開始-遅延$を指定する。 ◎ The animation-delay property specifies the start delay of the animation’s associated animation effect.

4.7. `animation-fill-mode$p ~prop

`animation-fill-mode$p は、当の`~animation$に`結付けられた効果$の`延伸~mode$を指定する。 ◎ The animation-fill-mode property specifies the fill mode of the animation’s associated animation effect.

4.8. `animation-composition^p ~prop

`animation-composition$p ~propは、［複数の~animationが同じ~propに同時に影響する場合］に利用される`組成-演算~型$を定義する。 ◎ The animation-composition property defines the composite operation used when multiple animations affect the same property simultaneously.

◎名 `animation-composition@p ◎値 `single-animation-composition$t# ◎初 `replace$v ◎適 `すべての要素$ ◎継されない ◎百受容しない ◎算指定された~keywordたちが成す~list ◎ list, each item a keyword as specified ◎順文法に従う ◎ア ~animate不可 ◎表終

`single-animation-composition@t
	= `replace$v
	| `add$v
	| `accumulate$v

各種値［ `replace@v ／ `add@v ／ `accumulate@v ］の意味は、 ~WAnimに定義される`組成-演算~型$［置換-型／加算-型／累積-型］と同じとする。 `WEB-ANIMATIONS$r ◎ The values of animation-composition have the meaning defined for the corresponding values of the composite operation defined in Web Animations [WEB-ANIMATIONS].

~keyframe内に指定された `animation-composition$p は、その~keyframe内に指定された各~prop用に — 各~propごとに，それを指定している次の~keyframeまで — 利用する組成-演算を定義する。 ◎ When specified in a keyframe, animation-composition defines the composite operation to use for each property specified in that keyframe until the next keyframe specifying each property.

例えば，次の~stylesheetは、 `scale$p ~propを~targetにする 2 個の異なる~animationを定義している。 ◎ For example, the following stylesheet defines two different animations targetting the scale property.

@keyframes heartbeat {
  from {
    scale: 1;
    animation-timing-function: ease-out;
  }
  30% {
    scale: 1.3;
  }
}
.heartbeat {
  animation: heartbeat 0.3s 2s infinite;
}

@keyframes throb {
  50% {
    scale: 1.8;
  }
}
.icon:mouseover {
  animation: throb 0.4s add;
}

これら 2 個の~animationが同じ要素に適用された場合，通常は片方の~animationだけ適用されることになるが、 2 個目の~animationの `animation-composition$p に `add$v を指定した場合，この 2 個の~animationは結合されることになる。 ◎ If these two animations are applied to the same element, normally only one animation would apply, but by specifying add as the animation-composition on the second animation, the result of the two animations will be combined.

`~CSS遷移^i `CSS3-TRANSITIONS$r の`組成-順序$は， `~CSS~animation^i より前なので、次の例のように `animation-composition$p を利用して， `~CSS~animation^i と下層の遷移とを結合することもアリになる： ◎ Since CSS Transitions [CSS3-TRANSITIONS] have a lower composite order, it is possible to use animation-composition to combine CSS Animations with underlying transitions as in the following example.

.icon {
  filter: blur(20px);
  transition: filter 0.5s;
}
.icon:hover {
  filter: blur(0px);
  animation: brightness-pulse 3s infinite add;
}

@keyframes brightness-pulse {
  0% {
    scale: 1.1;
    filter: brightness(130%);
  }
  10% {
    scale: 1;
    filter: brightness(100%);
  }
}

これらの例の絵図を作成して、それらがイミを成すことを検証yする。 ◎ Create pictures of these examples and verify they make sense.

4.9. `animation-timeline^p ~prop

`animation-timeline$p ~propは、 ~animationとともに利用される`時列線$を定義する。 ◎ The animation-timeline property defines the timeline used with the animation.

注記：この仕様は、 ~animation用の時列線を指定するための構文は何も導入しない — それは、他の仕様 — `SCROLL-ANIMATIONS-1$r【！`SCROLL-ANIMATIONS$r】など — に委ねられる。 ◎ Note: This specification does not introduce any syntax to specify animation timelines but instead it is up to others specifications such as Scroll-linked Animations [SCROLL-ANIMATIONS] to do so.

◎名 `animation-timeline@p ◎値 `single-animation-timeline$t# ◎初 `auto^v ◎適 `すべての要素$ ◎継されない ◎百受容しない ◎算 ~list — 各~itemは、次に挙げるいずれか ⇒＃ ~keyword `none$v ／ ~keyword `auto$v ／ `~CSS識別子$（文字大小区別）／算出d `scroll$f 関数／算出d `view$f 関数 ◎ list, each item either the keyword none, the keyword auto, a case-sensitive css identifier, a computed scroll() function, or a computed view() function ◎順文法に従う ◎ア ~animate不可 ◎表終

`single-animation-timeline@t
	= auto
	| none
	| `dashed-ident$t
	| `scroll()$t
	| `view()$t

`animation-timeline$p ~propは、［ `animation-name$p, `animation-duration$p ］の様な~propに類似する — それは， 1 個以上の値をとり、各~値は，当の要素~上の対応する`~animation$に時列線 — § `animation-name^p ~prop に述べられるとおり，当の~animationに合致しておかれたそれ — を伴わせる，追加的な挙動を授ける。 ◎ The animation-timeline property is similar to properties like animation-name and animation-duration in that it can have one or more values, each one imparting additional behavior to a corresponding animation on the element, with the timelines matched up with animations as described here.

各~値の型は `single-animation-timeline$t であり、アリな値には，次に挙げる効果がある： ◎ Each value has type <single-animation-timeline>, whose possible values have the following effects:

`auto@v: 当の~animationの`時列線$は、 `DocumentTimeline$I — より特定的には，`既定の文書~時列線$ — になる。 ◎ The animation’s timeline is a DocumentTimeline, more specifically the default document timeline.
`none@v: 当の~animationには、 `時列線$は結付けられない。 ◎ The animation is not associated with a timeline.
`dashed-ident$t: ［ `~scroll進捗~時列線$／ `~view進捗~時列線$ ］のうち［所与の名前で参照され, かつこの要素を視野に入れるもの］は在る場合、それ【それらのうち最も優先されるもの】を利用する — `SCROLL-ANIMATIONS-1$r `§ 有名~時列線の視野の宣言-法＠~SCROLL-ANIM#timeline-scope$ （ `timeline-scope^p ~prop）にて定義されるとおり。 ◎ If a named scroll progress timeline or view progress timeline is in scope on this element, use the referenced timeline as defined in Scroll-driven Animations § Declaring a Named Timeline’s Scope: the timeline-scope property.; 他の場合、当の~animationには`時列線$は結付けられない。 ◎ Otherwise the animation is not associated with a timeline.
`scroll()$t: 所与の `scroll^f 関数により指示される`~scroll進捗~時列線$を利用する。 `SCROLL-ANIMATIONS-1$r § `scroll^f 記法を見よ。 ◎ Use the scroll progress timeline indicated by the given scroll() function. See Scroll-driven Animations § 2.2.1 The scroll() notation.
`view()$t: 所与の `view^f 関数により指示される`~view進捗~時列線$を利用する。 `SCROLL-ANIMATIONS-1$r § `view^f 記法を見よ。 ◎ Use the view progress timeline indicated by the given view() function. See Scroll-driven Animations § 3.3.1 The view() notation.

［ `animation-timeline$p が指定されていないとき， `animation-name$p を利用して時列線を選定する］ことをもっと容易にする — ［最も共通的な~animationが，単純かつ人に易しくなる］よう，［［ ~animationが［ ~keyframeたち, 時列線］どちらにも同じ名前を利用すること］を可能化するよう，時列線を選定すること］を［ `animation-name$p に許容する］ことにより。 `animation-timeline$p ~propが、［必要yなら，［ ~keyframeたち, 時列線］を独立に選定する］ための追加的な制御を作者に与える。 ◎ Make it easier to use animation-name to select the timeline when animation-timeline is not specified. Allowing animation-name to be used for selecting timeline enables most common animations to have to use a single name for both their keyframes and timeline which is simple and ergonomics. The animation-timeline property gives authors additional control to independently select keyframes and timeline if necessary.

複数の `animation-*^p ~propが同時に設定されたときは、 `animation-timeline$p が，最初に更新される。なので、例えば `animation-play-state$p に対する変更は， `animation-timeline$p にて指定された［同時に適用される時列線］に適用される。 ◎ When multiple animation-* properties are set simultaneously, animation-timeline is updated first, so e.g. a change to animation-play-state applies to the simultaneously-applied timeline specified in animation-timeline.

4.10. `animation^p 略式~prop

`animation$p 略式~propの構文は、次に従う【ように，`~level 1$ から更新された（ `single-animation-timeline$t が追加された）】： ◎ The animation shorthand property syntax is as follows:

`single-animation@t
	= `animation-duration$tp
	|| `easing-function$t
	|| `animation-delay$tp
	|| `single-animation-iteration-count$t
	|| `single-animation-direction$t
	|| `single-animation-fill-mode$t
	|| `single-animation-play-state$t
	|| [ `none^v | `keyframes-name$t ]
	|| `single-animation-timeline$t

5. ~animation~event

5.1. ~eventの配送-法

注記： ~WAnim~API `WEB-ANIMATIONS$r を利用して~animationが［ ~seekされる／逆再生されている］可能性を織り込むため、この節の記述は，`~level 1$ による~event配送-法より一般的である。 ◎ Note, this is a more general description of event dispatch than that of CSS Animations Level 1 [CSS3-ANIMATIONS] since it must account for the possibility of animations being seeked or reversed using the Web Animations API [WEB-ANIMATIONS].

~CSS~animation~event用の`~target$は、当の~animationを`所有している要素$になる。 `所有している要素$は無い場合、配送される~CSS~animation~eventも無い（それでも、 ~WAnimに定義される`~animation再生~event$は，対応している `CSSAnimation$I ~objに向けて配送されるが）。 ◎ The target for a CSS animation event is the animation’s owning element. If there is no owning element, no CSS animation events are dispatched (although the animation playback events defined in Web Animations are still dispatched at the corresponding CSSAnimation object).

どの~eventを配送するか決定する目的においては、 ~WAnim~modelにて定義される `各種相＠~WANIM#animation-effect-phases-and-states$が利用される。相は，`~animation効果$に対し定義されるが、 ~eventを配送する目的においては， `~CSS~animation^i はそれに`結付けられた効果$と同じ相にあると見なされる。例えば，所与の `~CSS~animation^i は、それに`結付けられた効果$は`事前~相$iにあるならば，`事前~相$iにあるとする。 ◎ For the purpose of determining which events to dispatch, the phases defined in the Web Animations model are used. These definitions apply to an animation effect, however, for the purpose of dispatching events, we consider a CSS Animation to have the same phase as its associated effect. For example, a CSS Animation is in the before phase if its associated effect is in the before phase.

`結付けられた効果$が無い `~CSS~animation^i の相は、その`現-時刻$に応じて［ `未解決$ならば`遊休~相$i ／ 0 未満ならば`事前~相$i ／ ~ELSE_ `事後~相$i ］にあるものと見なされる。 ◎ A CSS Animation that does not have an associated effect is considered to be in the idle phase if its current time is unresolved, in the before phase if its current time is less than zero, and in the after phase otherwise.

同様に，以下における `~CSS~animation^i の［ `開始-遅延$, `作動~所要時間$, `現在の反復~index$, `反復~始端$, `反復~所要時間$ ］は、当の~animationに`結付けられた効果$の各種~propを指すものと解するベキである。 ◎ Similarly, subsequent references to the start delay, active duration, current iteration, iteration start, and iteration duration of a CSS animation should be understood to refer to the corresponding properties of the animation’s associated effect.

各~eventの `elapsedTime$m（`経過d時間$）を計算する際には、次の定義が利用される： ◎ For calculating the elapsedTime of each event, the following definitions are used:

`区間~始端@ ~EQ `max^op( `min^op( ~MINUS `開始-遅延$, `作動~所要時間$ ), 0) ◎ interval start = max(min(-start delay, active duration), 0)
`区間~終端@ ~EQ `max^op( `min^op( `結付けられた効果の終端$ ~MINUS `開始-遅延$, `作動~所要時間$ ), 0) ◎ interval end = max(min(associated effect end - start delay, active duration), 0)

新たな`~animation~frame$が確立される各回にて配送する~event【, およびその`経過d時間$】は、当の~animationの［ `処理待ち再生-~task$, `処理待ち静止-~task$ ］は`どちらも^em ε （無い）ならば，当の~frameを［確立する前, 確立した後］における~animationの相を次に従って比較することにより決定される： ◎ Each time a new animation frame is established and the animation does not have a pending play task or pending pause task, the events to dispatch are determined by comparing the animation’s phase before and after establishing the new animation frame as follows:

		確立-後
		事前~相	作動~相	事後~相	遊休~相
確立-前	事前~相		Ss	Ss, Se	C
	作動~相	Es	I	Ee	C
	事後~相	Se, Es	Se
	遊休~相		Ss	Ss, Se

上の表tの各欄に挙げられた記号は、下の表tに示す対応する~eventが，挙げられた順に間を置かずに配送されることを表す（空欄は、配送される~eventは無いことを表す）。

上の表tの各欄に現れる記号の意味
記号	配送される~event	`経過d時間@
Ss	`animationstart$et	`区間~始端$
Se	`animationstart$et	`区間~終端$
Es	`animationend$et	`区間~始端$
Ee	`animationend$et	`区間~終端$
C	`animationcancel$et	（下を見よ）
I	`animationiteration$et	（下を見よ）

◎ Change Events dispatched｜Elapsed time (ms) idle or before → active｜animationstart｜interval start idle or before → after *｜animationstart｜interval start 〃｜animationend｜interval end active → before｜animationend｜interval start active → active and the current iteration of the animation’s associated effect has changed since the previous animation frame｜animationiteration｜(See below) † active → after｜animationend｜interval end after → active｜animationstart｜interval end after → before *｜animationstart｜interval end 〃｜animationend｜interval start not idle and not after → idle｜animationcancel｜The active time of the animation at the moment it was cancelled calculated using a fill mode of both. ◎ * Where multiple events are listed for a state change, all events are dispatched in the order listed and in immediate succession.

C に対応する~eventの経過d時間は、取消された~momentにおける~animationの`作動~時刻$として与えられ， `延伸~mode$に `両方^i 【, および確立-前の相】を利用する下で計算される。 ◎ ↑
I に対応する~eventは、 ~animationに`結付けられた効果$の`現在の反復~index$が前回の`~animation~frame$から変化した場合に限り配送される。その経過d時間は、次に従って定義される： ◎ ↑ ◎ † The elapsed time for an animationiteration event is defined as follows:
1. %前回の現-反復 ~LET 確立-前の~animation~frameにおける`現在の反復~index$ ◎ Let previous current iteration be the current iteration from the previous animation frame.
2. %反復~境界 ~LET 確立-後の~animation~frameにおける`現在の反復~index$ ◎ ↓
3. ~IF［ %前回の現-反復 ~GT %反復~境界］ ⇒ %反復~境界 ~INCBY 1 ◎ If previous current iteration is greater than current iteration, let iteration boundary be current iteration + 1, otherwise let it be current iteration.
4. ~RET ( %反復~境界 ~MINUS `反復~始端$ ) ~MUL `反復~所要時間$ ◎ The elapsed time is the result of evaluating (iteration boundary - iteration start) × iteration duration).

上に定義される`経過d時間$は~milli秒数で表出されるので、 `AnimationEvent$I の `elapsedTime$m ~memberにアテガうときは，その前に 1000 で除算して秒単位の値を生産するモノトスル。 ◎ Since the elapsed time defined in the table and procedure above is expressed in milliseconds, it must be divided by 1,000 to produce a value in seconds before being assigned to the elapsedTime member of the AnimationEvent.

6. ~DOM~interface

6.1. `CSSAnimation^I ~interface

[`Exposed$=Window]
interface `CSSAnimation@I : `Animation$I {
  readonly attribute `CSSOMString$ `animationName$m;
};

`animationName@m ◎ animationName, of type CSSOMString, readonly: ~animationが作成された時点で，合致している［ `結付けられた効果$を定義する `keyframes$at 規則］を見出すために利用された~keyを返す。これは、コレを生成させた `animation-name$p ~propの値【を成すいずれかの名前】になる。 ◎ The key used to find matching keyframes rules that define the associated effect at the point when the animation was created. This is the value of the animation-name property that caused this object to be generated.

6.2. 処理待ち~style変化に対する要件

様々な演算が要素~上の~propの`算出d値$に影響し得る。 ~UAは、最適化として，必要yあるまでこれらの値を算出し直すのを先送りしてもヨイ。しかしながら，次に挙げる演算は、［算出d値に対する処理待ち変化を全部的に処理したとき］と整合な結果を生産するモノトスル：

この仕様が定義する~APIに含まれるすべての演算
~WAnim `WEB-ANIMATIONS$r に定義される演算のうち，この仕様が定義する［ ~obj／~animation状態］を返し得るもの

◎ Various operations may affect the computed values of properties on elements. User agents may, as an optimization, defer recomputing these values until it becomes necessary. However, all operations included in programming interface defined in this specification, as well as those operations defined in Web Animations [WEB-ANIMATIONS] that may return objects or animation state defined by this specification, must produce a result consistent with having fully processed any such pending changes to computed values.

注記：例えば次の~code片のように，要素 %elem に初期~時に指定された~styleが更新されたとき、 ~UAは，%elem の `animation$p ~propの算出d値を計算し直すのを先送りしてもヨイ。 ◎ As an example, in the following code fragment, when the specified style of elem is initially updated, a user agent may defer recalculating the computed value of the animation property.

しかしながら， %elem 上で~callされる `getAnimations()$m ~methodは、 ~WAnimにより指定され，この仕様が定義する `CSSAnimation$I ~objを返し得る。よって，この節の要件から、 ~UAは — 結果を返す前に — %elem の `animation$p ~propの更新された値を計算してから，要請された `CSSAnimation$I ~objを作成する必要がある。 ◎ However, the getAnimations() method called on elem is specified by Web Animations and can return CSSAnimation objects as defined in this specification. Hence, as result of the requirements in this section, the user agent must calculate the updated value of elem’s animation property and create the requested CSSAnimation object before returning its result.

%elem.style.animation = 'fadeOut 1s';
%elem.getAnimations()[0].pause();

同様に， `playState$m を読取った結果は、処理待ち~style変化に依存し得る。 ◎ Similarly, reading playState may depend on pending style changes.

%elem.style.animation = 'fadeOut 1s paused';
const %anim = %elem.getAnimations()[0];
%elem.style.animationPlayState = 'running';
console.log(%anim.playState); /* 
`running^l （ `稼働中$i ）になるべき。
◎
Should be 'running'.
 */

~privacyの考慮点

この仕様に対し報告された~privacyの懸念は、無い。 ◎ No privacy concerns have been reported on this specification.

~securityの考慮点

この仕様に対し報告された~securityの懸念は、無い。 ◎ No security concerns have been reported on this specification.

変更点

`2023年 3月 2日作業草案＠~TR/2023/WD-css-animations-2-20230302/$ からの変更点 ◎ 9.1. Recent Changes ◎ Changes since the 2 March 2023 Working Draft include:: `animation-duration$p の`初期~値$として `~auto0$v を追加した。（ `6530$issue ） ◎ Added auto as the initial value of animation-duration. (Issue 6530); `§ ~keyframeの処理-法＠#keyframe-processing$を書き直した ⇒＃ `~cascade$を再利用するよう／百分率でない~keyframe~offsetを取扱うよう／範囲 [0,1] の外側にある~offsetを伴う~keyframeを取扱うよう／ `animation-composition$p の値を既定の組成法として利用するよう ◎ Rewrote § 3.2 Processing Keyframes to re-use the cascade, to handle non-percentage keyframe offsets, to handle keyframes with offsets outside the [0,1] range, and to use the value of animation-composition as the default composite.; `display$p が `none^v をとるときに~animationを取消す事例を抑制した。（ `6429$issue ） ◎ Reduced the cases where display: none cancel an animation. (Issue 6429); `CSS-VALUES-4$r `§ 協調している~list値をとる~prop群＠~CSSVAL#linked-properties$ へ相互~linkした — 各種 `animation-*^p ~propがどう相互作用するか定義するため。 ◎ Cross-linked to CSS Values 4 § A Coordinating List-Valued Properties to define how the various animation-* properties interact.; 各種 `animation-*^p ~propのうち， `animation-timeline$p が最初に適用されることを明確化した。 ◎ Clarified that among the animation properties, animation-timeline is applied first.
`~level 1$ からの変更点 ◎ 9.1. Changes since CSS Animations, Level 1: CSS Animations と~WAnimの相互作用を定義した。［ `所有している要素$, ~animationの`組成-順序$ ］の概念を導入した。 ◎ The interaction between CSS Animations and Web Animations is defined, and the concepts of the owning element and animation composite order are introduced.; ~keyframe~objの生成を詳細に述べた。 ◎ Generation of keyframe objects is described in detail.; `animation-composition$p ~propを導入した — それは、複数の~animationが同じ~prop同時に影響するときに利用される組成-演算を定義する。 ◎ The animation-composition property is introduced, which defines the composite operation used when multiple animations affect the same property simultaneously.; `animation-timeline$p ~propを導入した — それは、 ~animationと伴に利用される時列線を定義する。 ◎ The animation-timeline property is introduced, which defines the timeline used with the animation.; 上述した新たな~propを織り込むよう， `animation$p 略式~propを更新した。 ◎ The animation shorthand property is updated to account for these new properties.; ~animation~eventの配送-について述べた。 ◎ Dispatch of animation events is described.; `CSSAnimation$I ~interfaceを追加した。 ◎ The CSSAnimation interface is added.; 処理待ち~style変化に対する要件を述べた。 ◎ Requirements on pending style changes are described.