CSS Animations Module 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 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-timeline$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, animation-play-state, or animation-timeline 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 ⇒ `組成-演算~型$を与える
  - `値~map@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 （`~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-block> declarations 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. %値~map ~LET 新たな`~map$
5. 【！~TR/CSS21/syndata.html#x14】【！宣言~block~CSSOM1#css-declaration-block】 %~block群を成す~blockたちに`~cascade$を適用する `CSS-CASCADE-4$r — ここでは ⇒＃ %~block群の順序（すなわち，文書~順序）で最も後に宣言された~prop宣言が優先されることになる。 “~animate不可” とされた~propは無視する。
  
  その結果【すなわち，各~propの`~cascaded値$たち】を成す ~EACH( `宣言d値$ %値 ) に対し：
  1. %~prop名 ~LET %値を与えた宣言の`~prop名$ 【！property name that was added to its cssRules】
  2. %値~map[ %~prop名 ] ~SET %値
  3. %~animateされる~prop群に %~prop名を追加する
  注記： `~cascade$は、［各`略式~prop$をその`下位prop$たちに展開する］ことに加え［ %要素の【！`算出d$】`書字~mode$に則って，各`論理-~prop~group$内の対応する~prop~pairを一緒に対応付ける］ことになる。
6. %~keyframe ~LET 次を伴う新たな~keyframe~obj ⇒＃ `~offset$kF ~SET %~offset, `計時~関数$kF ~SET %最後に宣言された計時~関数, `組成法$kF ~SET %最後に宣言された組成法, `値~map$kF ~SET %値~map
7. %~keyframe群に %~keyframe を`付加する$
8. ~IF［ %~offset ~EQ 0% ］ ⇒ %初期~keyframe ~SET %~keyframe
9. ~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-block> declarations, 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-block> declarations 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 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 cssRules to animated properties.
（この段は、［ 0% ／ 100% ］~keyframeに指定されなかった値を追加する）：

« %初期~keyframe, %最終-~keyframe » を成す ~EACH( %初期または最終-~keyframe ) に対し：
1. %~animateされる~prop群を成す ~EACH( %~prop名 ) に対し：
  1. ~IF［ %初期または最終-~keyframe の`値~map$kF[ %~prop名 ] ~NEQ ε ］ ⇒ ~CONTINUE
  2. %~keyframe群を成す ~EACH( %~keyframe ) に対し：
    1. ~IF［ %~keyframe の`値~map$kF[ %~prop名 ] ~EQ ε ］ ⇒ ~CONTINUE
    2. ~IF［ ~OR↓ ］…
      - ［ %初期または最終-~keyframe ~EQ %初期~keyframe ］~AND［ %~keyframe は， `使用~keyframe順序$においては %初期~keyframe より前に位置する］
      - ［ %初期または最終-~keyframe ~EQ %最終-~keyframe ］~AND［ %~keyframe は， `使用~keyframe順序$においては %最終-~keyframe より後に位置する］
      …ならば ⇒ %初期または最終-~keyframe の`値~map$kF[ %~prop名 ] ~SET %要素上での %~prop名 ~propの`算出d値$
2. ~IF［ %初期または最終-~keyframe の`値~map$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順序$を利用して `breaking ties^en †
  
  【† おそらく、順序が決定できない場合は，算出d~keyframe順序に従う。】【これらが何を意味するか知るには、他の~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 ◎値 [ `auto$v | `time[0s,∞]$t ]# ◎初 `auto$v ◎適すべての要素 ◎継されない ◎百受容しない ◎算［ `time$t ／~keyword `auto$v ］たちが成す~list ◎順文法に従う ◎ア ~animate不可 ◎表終 ◎ Name: animation-duration Value: [ auto | <time [0s,∞]> ]# Initial: auto Applies to: all elements Inherited: no Percentages: N/A Computed value: list, each item either a time or the keyword auto Canonical order: per grammar Animation type: not animatable

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

`auto@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$用には、 `auto$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＠~CSSANIM#valdef-animation-fill-mode-backwards$v ／ `forwards＠~CSSANIM#valdef-animation-fill-mode-forwards$v ／ `both＠~CSSANIM#valdef-animation-fill-mode-both$v ］の場合、当の~animationの［最初の~frame／最後の~frame／最初と最後の~frame ］が `animation-delay$p 【による遅延~期間】の［間／後／間と後］に（ `animation-direction$p にて定義されるとおり）表示されることになる。 `none＠~CSSANIM#valdef-animation-fill-mode-none$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＠#valdef-animation-timeline-auto$v になる場合（すなわち、 ~listを成す値は 1 個の `auto^v のみである）、 `animation-duration$p 用の値 `auto$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＠~CSSANIM#valdef-animation-play-state-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＠~CSSANIM#valdef-animation-play-state-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 ◎順文法に従う ◎ア ~animate不可 ◎表終 ◎ Name: animation-composition Value: <single-animation-composition># Initial: replace Applies to: all elements Inherited: no Percentages: N/A Computed value: list, each item a keyword as specified Canonical order: per grammar Animation type: not animatable

`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識別子$（文字大小区別）／ `scroll$f 関数の算出d値／ `view$f 関数の算出d値 ◎順文法に従う ◎ア ~animate不可 ◎表終 ◎ Name: animation-timeline Value: <single-animation-timeline># Initial: auto Applies to: all elements Inherited: no Percentages: N/A Computed value: list, each item either the keyword none, the keyword auto, a case-sensitive css identifier, a computed scroll() function, or a computed view() function Canonical order: per grammar Animation type: not animatable

`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-trigger^p ~prop

◎名 `animation-trigger@p ◎値 [ `none$v | [ `dashed-ident$t `animation-action$t+ ]+ ]# ◎初 `none$v ◎適すべての要素 ◎継されない ◎百受容しない ◎算指定されたとおり ◎ア ~animate不可 ◎順文法に従う ◎表終 ◎ Name: animation-trigger Value: [ none | [ <dashed-ident> <animation-action>+ ]+ ]# Initial: none Applies to: all elements Inherited: no Percentages: N/A Computed value: as specified Canonical order: per grammar Animation type: not animatable

`animation-trigger$p ~propは、当の~animationが`誘発される~animation$になるかどうか，およびそうなる場合，それは［どの誘発体に対し，何の動作で応答するか］を指定する。この~propは、 `animation$p 略式の`設定し直すのみ$な`下位prop$である。各種~値は： ◎ The animation-trigger property specifies whether the animation is a triggered animation, and if it is, what trigger it responds to and what actions it takes in response. animation-trigger is a reset-only sub-property of the animation shorthand. Its values are:

`none@v

当の`~animation$は、 `誘発される~animation$にはならない。 ◎ The corresponding animation is not a triggered animation.

[ `dashed-ident$t `animation-action$t+ ]+

当の`~animation$は、 `誘発される~animation$になり，各［ `dashed-ident$t により命名された誘発体］に対し［対応する `animation-action$t により命名された動作をとる］ことにより応答する。（各 `dashed-ident$t が，どう`誘発体$へ解決されるかは、 `§ 誘発体の視野と解決＠#trigger-scope$ を見よ）。 ◎ The corresponding animation is a triggered animation, responding to the triggers named by each <dashed-ident>, and responding by taking the action named by the corresponding <animation-action>. (See § 5.1 Trigger Scope/Resolution for how <dashed-ident>s are resolved to triggers.)

誘発体が `animation-action$t をいくつ受容するか, 正確に何がそれらを作動化するかは、当の誘発体の種別により決定される。間違った（多過ぎる／少な過ぎる）個数の動作を指定しても，構文上は妥当になるが、当の誘発体は，効果を発揮しなくなる。

注記：［ `~event誘発体$／`時列線~誘発体$ ］は、 1 個または 2 個とる（ 2 個目は省略可能） — うち，無状態な`~event誘発体$は、 1 個しかとらない。

◎ How many <animation-action>s a trigger accepts, and what exactly activates them, is determined by the type of the trigger.＼ (Event triggers take one and possibly an optional second, depending on whether they’re stateless or stateful; timeline triggers take one and optionally a second.)＼ Specifying the wrong number of actions (too many or too few) is valid syntactically, but causes the trigger to have no effect.

複数の誘発-が同時に生じた場合、それらは，指定された順序で効果を発揮する。 ◎ If multiple triggers occur simultaneously, they take effect in the order specified.

同じ `dashed-ident$t が複数回~指定された場合、最後のもの以外は効果を発揮しない。 ◎ If the same <dashed-ident> is specified multiple times, all but the last have no effect.

`animation-action@t 用にアリな値は、次の表tの 1 列目に挙げられる。 2 列目~以降には、それらの効果を挙げる（空欄は無し）。 2 列目は、現在の~animation状態に関わらず，［ 3 列目~以降に挙げる各~状態に特有な動作］より前に起こる：

~keyword	~~追加の効果	初期	再生-中	静止中	完遂した
`none@vA
`play@vA		`play()$m		`play()$m	`play()$m
`play-once@vA		`play()$m		`play()$m
`play-forwards@vA	再生~rateを正に設定する	`play()$m		`play()$m	`play()$m
`play-backwards@vA	再生~rateを負に設定する	`play()$m		`play()$m	`play()$m
`pause@vA			`pause()$m
`reset@vA	進捗を 0 に設定する		`pause()$m	`pause()$m	`pause()$m
`replay@vA	進捗を 0 に設定する	`play()$m		`play()$m	`play()$m

◎ The possible <animation-action> values, and what effect they have in each animation state: ◎ Keyword｜Extra Effect｜initial｜playing｜paused｜finished none｜—｜—｜—｜—｜— play｜—｜play()｜—｜play()｜play() play-once｜—｜play()｜—｜play()｜— play-forwards｜set playback rate to positive｜play()｜—｜play()｜play() play-backwards｜set playback rate to negative｜play()｜—｜play()｜play() pause｜—｜—｜pause()｜—｜— reset｜set progress to 0｜—｜pause()｜pause()｜pause() replay｜set progress to 0｜play()｜—｜play()｜play() If there is an "effect", it happens regardless of the current state, before the state-specific action

4.11. `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. 誘発体

~CSS~animationは，既定では［要素~上に適切な `animation$p 値たちが設定され次第，自動的に稼働する］が、 `animation-trigger$p ~propは，当の~animationが `誘発される~animation@ になることを許容する — すなわち、当の~animationの開始を適切な誘発-が生じるまで遅延することに加え，誘発-により［静止する／開始し直す／設定し直す］ことまでも許容する。 ◎ While CSS animations are, by default, automatically run as soon as the appropriate animation values have been set on an element, the animation-trigger property allows the animation’s start to be delayed until an appropriate trigger occurs, and even paused, restarted, or reset by triggers (making it a triggered animation).

これは、［ ~JSにおいて~WAnim~APIで達成できるもの］を成す［単純~化され, 簡略化された~version ］であり，［単純かつ共通的な，ヤリトリ~pattern ］を［純粋に~CSSで作成して管理する］ことを許容する。 ◎ This is a simplified and streamlined version of what can be achieved with the Web Animations API in Javascript, allowing simple, common interaction patterns to be created and managed purely in CSS.

現時点では、 `誘発体@ （ `trigger^en ）には，次に挙げる 2 つの種別が定義される： ◎ Currently, two types of triggers are defined:

`時列線~誘発体$ ◎ timeline triggers,＼: `timeline-trigger$p ~propの下位propたちにより管理され、 ~animationが，ある種の時列線~範囲［に入る／から出る］ことにより誘発されることを許容する。（通例的には、 `~view進捗~時列線$ — そこでは、当の~animationを~scroll進捗で実際に`駆動する^emことなく，要素が~screen上に来たとき~animationを開始できる。） ◎ managed by the timeline-trigger properties, which allow animations to be triggered by entering or leaving certain timeline ranges. (Usually, view progress timelines, so an animation can be started when an element comes on-screen, without actually driving the animation with the scroll progress.)
`~event誘発体$ ◎ event triggers,＼: 各種 `event-trigger$p ~propの下位propたちにより管理され、 ~animationが，ある種の利用者ヤリトリ~event — ある要素を~clickする, ある種の~UIkeyを押下げる, など — により誘発されることを許容する。 ◎ managed by the event-trigger properties, which allow animations to be triggered by certain user-interaction events, such as clicking an element or pressing certain keys.

`誘発体$は、何らかの特定の要素~上で`定義される^em — それに結付けられた動作が，当の要素に対し誘発されるよう。すべての誘発体は、名前を有する。誘発体の種別は、それが，いつ, どう作動化されるかを規定する。誘発体は、複数の “型” を成す作動化を定義し得る（例えば，`時列線~誘発体$は、【現-時刻が指定された範囲に】［入るとき, 出るとき］で異なる動作を行い得る） ◎ A trigger is defined on some specific triggering element. All triggers have a name, and the specific type of trigger dictates how and when it’s activated. A trigger can define multiple "types" of activation. (For example, timeline triggers can do different things on entry and exit.)

`誘発体$は、どの要素にも`利用される^em能性があり，当の要素に対し `誘発-~instance@ （ `trigger instance^en ）を作成する。（例えば `animation-trigger$p は、当の要素~上の`誘発-~instance$を当の要素に対する特定の~animationに結付ける。） `誘発体$を利用している要素は、［当の誘発体が作動化されたとき，動作として何をとるか］を指定する。 ◎ A trigger is used on potentially any element, creating a trigger instance on the element. (For example, animation-trigger associates a trigger instance with a specific animation on the element.) The trigger-using element specifies what actions to take when the trigger activates.

注記：将来において，`誘発体$を`他の目的^emに利用することを~supportするため、［ `誘発体$, `誘発-~instance$ ］用のこの設計, およびそれらに［ `誘発される~animation$, `animation-action$t ］を結付ける仕方は，意図的にいくぶん汎用である。この特能を利用するものは、今の所は，`誘発される~animation$しかないが。【~animation以外の目的にも利用されるかもしれない。】 ◎ Note: This design for triggers and trigger instances, and the way they’re associated with triggered animations and <animation-action>s, is intentionally somewhat generic, intended to support using triggers for other purposes in the future. For now, though, triggered animations are the only user of this feature.

5.1. 誘発体の視野と解決

すべての`誘発体$は、既定では，文書に大域的である — `~anchor名$と類似に。 ◎ All triggers are document-global by default, similar to anchor names.

単独の要素が複数個の［同じ名前を伴うが種別は異なる`誘発体$ ］を定義するよう試みた場合、それらのうち 1 個に限り公開される — `~event誘発体$が`時列線~誘発体$よりも優先される下で。 ◎ If a single element attempts to define multiple triggers of different types with the same name, it only exposes one of them, with event triggers winning over timeline triggers.

注記：この順序は、完全に恣意的である【！概念~名の~alphabetic順序に基づく】 — これは、単なる~error事例なので。 ◎ Note: This order is completely arbitrary (based on alphabetic order of the concept name), as this is just an error case.

複数個の要素が同じ名前を伴う`誘発体$を定義する場合、 `~tree順序$で後にある要素により定義された`誘発体$が利用される。 ◎ If multiple elements define triggers with the same name, the trigger defined by the later element in tree order is used.

注記：この挙動は、まだ定義されていない `trigger-scope^p ~propにより改善されることになる。それは、［誘発体が下位treeのみから可視になり，誘発体への参照は当の下位tree内に限り探索する］ものと定義できるようにする（ `anchor-scope$p と同様に）。 ◎ Note: This behavior will be improved by a trigger-scope property, not yet defined, letting you define triggers that are only visible to subtrees and references that only search in that subtree (just like anchor-scope).

5.2. 時列線~誘発体

`時列線~誘発体@ （ `timeline trigger^en ）は、何らかの`時列線$【の`現-時刻$】が当の誘発体の［ `入口~範囲@tT （ `enter range^en ）に入る／ `出口~範囲@tT （ `exit range^en ）から出る］ときに作動化される`誘発体$である。それは、［ `timeline-trigger$p 略式~propや, その下位propたち］を伴う【 `timeline-trigger-name$p が初期~値~以外をとる】要素~上で定義される。 ◎ A timeline trigger is a trigger which is activated when some timeline enters the trigger’s enter range, or leaves the trigger’s exit range. It is defined on an element with the timeline-trigger shorthand property, or its longhands.

各 `時列線~誘発体$ %誘発体には、 `誘発されたか@tT 【！誘発体~状態】が結付けられる — それは、真偽値をとり，初期~時は ~F とする： ◎ A timeline trigger has a binary trigger state associated with it; it is initially "untriggered".＼

~F をとる間は、 %誘発体に結付けられた`時列線$【の`現-時刻$】が %誘発体の`入口~範囲$tTに入ったとき（または，そこで開始されたとき）， %誘発体に結付けられた `入口~動作@tT を遂行することに加え， %誘発体の`誘発されたか$tTを ~T へ切替える。 ◎ While it’s "untriggered", the associated timeline entering (or starting in) the trigger’s enter range performs an associated enter action and switches the trigger state to "triggered";＼
~T をとる間は、 %誘発体に結付けられた`時列線$【の`現-時刻$】が %誘発体の`出口~範囲$tTから`出た^emとき， %誘発体に結付けられた `出口~動作@tT を遂行することに加え， %誘発体の`誘発されたか$tTを ~T へ切替える。 ◎ while it’s "triggered", the associated timeline leaving the trigger’s exit range performs an associated exit action and switches the trigger state to "untriggered".

【 `誘発されたか$tTは、原文では “`trigger state^en（誘発体~状態）” と称され，［ "`untriggered^en", "`triggered^en" ］をとり得るものと定義されるが、この訳では，真偽-~flagで表現することにする。】

注記：既定では、 `出口~範囲$tTは`入口~範囲$tTと同じになる — 手動で指定されときでも、 `出口~範囲$tTは，常に`入口~範囲$tTの`上位集合^emになる。この 2 つの範囲は、例えば，ある `animation-trigger$p が［要素が~screenの中央近くに~scrollされたとき，（`入口~範囲$tTとして比較的~小さな窓を伴う`~view進捗~時列線$を利用して） ~animationを開始する］が［要素が全部的に~screenから外れるまでは，（`出口~範囲$tTとして `cover＠~SCROLL-ANIM#valdef-animation-timeline-range-cover$v を利用して）それを停止しない］ことを許容する。 ◎ Note: By default, the exit range is the same as the enter range; even when manually specified, the exit range is always a superset of the enter range. The two ranges allow, for example, an animation-trigger to start an animation when an element is scrolled close the center of the screen (using a view progress timeline with a relatively small window as the enter range), but not stop it until the element is fully off-screen (using cover as the exit range).

`WEB-ANIMATIONS-2$r が，［出口~範囲が`入口~範囲$tTの限界~範囲として解釈されること］および［ `出口~範囲$tT用に何が指定されるか］を定義する必要があると思われる。 ◎ I think it’s WebAnim2 that needs to define that exit ranges are interpreted as the bounding range of the enter range and what’s specified for the exit range.

`時列線~誘発体$は、ある要素~上の誘発体として（ `animation-trigger$p などにより）利用されるときは， 1 個か 2 個の動作が結付けられ得る。当の誘発体の`入口~動作$tTは， 1 個目のそれになり、 `出口~動作$tTは， 2 個目も指定されたならばそれ, 指定されなかったならば何もしない。 ◎ A timeline trigger can have one or two actions associated with it when used as a trigger on an element (such as by animation-trigger). If two are specified, the first is the trigger’s enter action and the second is the trigger’s exit action; if only one is specified, the first is the trigger’s enter action and its exit action is to do nothing.

要素は，複数個の`時列線~誘発体$を定義し得るが、それらが利用する`時列線$は［同じになる／異なる］必要はなく，時列線が同じでも異なる範囲を伴い得る。 `timeline-trigger$p の下位propたちが成す集合は、 `協調している~list~prop~group$を形成する。 `timeline-trigger-name$p が， `協調している基底~list~prop$になり、 `協調される値~list$を成す各~itemは， 1 個の`時列線~誘発体$を成す~prop群を定義する。 ◎ An element can define multiple timeline triggers, using the same timeline (potentially with different ranges) or different ones. The set of timeline-trigger longhands form a coordinating list property group, with timeline-trigger-name as the coordinating list base property, and each item in the coordinated value list defining the properties of a single timeline trigger.

5.2.1. 誘発体の命名-法： `timeline-trigger-name^p ~prop

◎名 `timeline-trigger-name@p ◎値 none | `dashed-ident$t# ◎初 `none$v ◎適すべての要素 ◎継されない ◎百受容しない ◎算指定されたとおり ◎ア ~animate不可 ◎順文法に従う ◎表終 ◎ Name: timeline-trigger-name Value: none | <dashed-ident># Initial: none Applies to: all elements Inherited: no Percentages: N/A Computed value: as specified Canonical order: per grammar Animation type: not animatable

`none^v が指定された場合、当の要素は，`時列線~誘発体$を定義しない。 ◎ If none is specified, the element does not define any timeline triggers.

~list内に同じ `dashed-ident$t が複数回~現れる場合、最後のものに限り`時列線~誘発体$を定義する — それ以外のものには効果は無い。 ◎ If the same <dashed-ident> appears multiple times in the list, only the last one defines a timeline trigger; the preceding ones have no effect.

5.2.2. 時列線の~link法： `timeline-trigger-source^p ~prop

◎名 `timeline-trigger-source@p ◎値 `single-animation-timeline$t# ◎初 `auto^v ◎適すべての要素 ◎継されない ◎百受容しない ◎算 ~list — 各~itemは、次に挙げるいずれか ⇒＃ `none^v ／ `auto^v ／ `~CSS識別子$（文字大小区別）／ `scroll$f 関数の算出d値／ `view$f 関数の算出d値 ◎ア ~animate不可 ◎順文法に従う ◎表終 ◎ Name: timeline-trigger-source Value: <single-animation-timeline># Initial: auto Applies to: all elements Inherited: no Percentages: N/A Computed value: list, each item either the keyword none, the keyword auto, a case-sensitive css identifier, a computed scroll() function, or a computed view() function Canonical order: per grammar Animation type: not animatable

`timeline-trigger-source$p ~propは、当の`時列線~誘発体$に結付けられる`時列線$を指定する。各種~値の意味は、次を除いて， `animation-timeline$p 用のそれらと同じである ⇒ 値 `none^v は、 `協調される値~list$を成す対応する~entryが， `時列線~誘発体$を定義しないようにする。 ◎ The timeline-trigger-source property specifies the timeline trigger’s associated timeline. Values have the same meaning as those of animation-timeline, except that none instead causes the corresponding entry in the coordinated value list to not define a timeline trigger.

5.2.3. 入口~範囲： `timeline-trigger-range^p ~prop

◎名 `timeline-trigger-range@p ◎値 [ `timeline-trigger-range-start$tp `timeline-trigger-range-end$tp? ]# ◎初個々の~propを見よ ◎適個々の~propを見よ ◎継個々の~propを見よ ◎百個々の~propを見よ ◎算個々の~propを見よ ◎ア個々の~propを見よ ◎順文法に従う ◎表終 ◎ Name: timeline-trigger-range Value: [ <'animation-trigger-range-start'> <'animation-trigger-range-end'>? ]# Initial: see individual properties Applies to: see individual properties Inherited: see individual properties Percentages: see individual properties Computed value: see individual properties Animation type: see individual properties Canonical order: per grammar

`timeline-trigger-range$p ~propは、単独の宣言で［ `timeline-trigger-range-start$p, `timeline-trigger-range-end$p ］を一緒に設定する`略式~prop$である。その構文は、 `animation-range$p ~propと同じである。 ◎ The timeline-trigger-range property is a shorthand property that sets timeline-trigger-range-start and timeline-trigger-range-end together in a single declaration. It has the same syntax as the animation-range property.

`timeline-trigger-range$p の挙動は、 `WEB-ANIMATIONS-2$r `§ ~animation誘発体の範囲＠~WANIM2#trigger-ranges$ にて定義される。 ◎ The behavior of timeline-trigger-range is defined in Web Animations 2 § 3.6.5 Animation Trigger Ranges.

`WEB-ANIMATIONS-2$r を用語 “入口~範囲” を利用するよう書き直す必要がある。 ◎ Need to rewrite WebAnim2 to use the term "enter range".

◎名 `timeline-trigger-range-start@p, `timeline-trigger-range-end@p ◎値 [ `normal^v | `length-percentage$t | `timeline-range-name$t `length-percentage$t? ]# ◎初 `normal^v ◎適すべての要素 ◎継されない ◎百

次に挙げる時列線~範囲に相対的：

`timeline-range-name$t と伴に指定された場合 ⇒ それにより指定される`有名~時列線~範囲$
他の場合 ⇒ 当の時列線~全体

◎算 ~list — 各~itemは、次に挙げるいずれか ⇒＃ ~keyword `normal^v ／ ( 時列線~範囲, 進捗~百分率 ) ◎ア ~animate不可 ◎順文法に従う ◎表終 ◎ Name: timeline-trigger-range-start, timeline-trigger-range-end Value: [ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]# Initial: normal Applies to: all elements Inherited: no Percentages: relative to the specified named timeline range if one was specified, else to the entire timeline Computed value: list, each item either the keyword normal or a timeline range and progress percentage Canonical order: per grammar Animation type: not animatable

［ `timeline-trigger-range-start$p ／ `timeline-trigger-range-end$p ］~propは、 `時列線~誘発体$に結付けられた`入口~範囲$tTを指定する。各種~値の意味は、［ `animation-range-start$p, `animation-range-end$p ］用のそれらと同じである。 ◎ The timeline-trigger-range-start and timeline-trigger-range-end properties specify the timeline trigger’s associated enter range. Values have the same meaning as animation-range-start and animation-range-end.

5.2.4. 出口~範囲： `timeline-trigger-exit-range^p ~prop

◎名 `timeline-trigger-exit-range@p ◎値 [ `timeline-trigger-exit-range-start$tp `timeline-trigger-exit-range-end$tp? ]# ◎初個々の~propを見よ ◎適個々の~propを見よ ◎継個々の~propを見よ ◎百個々の~propを見よ ◎算個々の~propを見よ ◎ア個々の~propを見よ ◎順文法に従う ◎表終 ◎ Name: timeline-trigger-exit-range Value: [ <'animation-trigger-exit-range-start'> <'animation-trigger-exit-range-end'>? ]# Initial: see individual properties Applies to: see individual properties Inherited: see individual properties Percentages: see individual properties Computed value: see individual properties Animation type: see individual properties Canonical order: per grammar

`timeline-trigger-exit-range$p ~propは、単独の宣言で［ `timeline-trigger-exit-range-start$p, `timeline-trigger-exit-range-end$p ］を一緒に設定する`略式~prop$である。その構文は、 `animation-range$p ~propと同じである。 ◎ The timeline-trigger-exit-range property is a shorthand property that sets timeline-trigger-exit-range-start and timeline-trigger-exit-range-end together in a single declaration. It has the same syntax as the animation-range property.

`timeline-trigger-exit-range$p の挙動は、 `WEB-ANIMATIONS-2$r `§ ~animation誘発体の範囲＠~WANIM2#trigger-ranges$ にて定義される。 ◎ The behavior of timeline-trigger-exit-range is defined in Web Animations 2 § 3.6.5 Animation Trigger Ranges.

◎名 `timeline-trigger-exit-range-start@p, `timeline-trigger-exit-range-end@p ◎値 [ `auto$v | `normal^v | `length-percentage$t | `timeline-range-name$t `length-percentage$t? ]# ◎初 `auto^v ◎適すべての要素 ◎継されない ◎百

次に挙げる時列線~範囲に相対的：

`timeline-range-name$t と伴に指定された場合 ⇒ それにより指定される`有名~時列線~範囲$
他の場合 ⇒ 当の時列線~全体

◎算 ~list — 各~itemは、次に挙げるいずれか ⇒＃ ~keyword `normal^v ／ ( 時列線~範囲, 進捗~百分率 ) ◎ア ~animate不可 ◎順文法に従う ◎表終 ◎ Name: timeline-trigger-exit-range-start, timeline-trigger-exit-range-end Value: [ auto | normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]# Initial: normal Applies to: all elements Inherited: no Percentages: relative to the specified named timeline range if one was specified, else to the entire timeline Computed value: list, each item either the keyword normal or a timeline range and progress percentage Canonical order: per grammar Animation type: not animatable

［ `timeline-trigger-exit-range-start$p ／ `timeline-trigger-exit-range-end$p ］~propは、当の`時列線~誘発体$に結付けられる`出口~範囲$tTを指定する。各種~値の意味は、［ `animation-range-start$p, `animation-range-end$p ］用のそれらと同じであるが，次に挙げる追加を伴う： ◎ The timeline-trigger-exit-range-start and timeline-trigger-exit-range-end properties specify the timeline trigger’s associated exit range. Values have the same meaning as animation-range-start and animation-range-end, with the following addition:

`auto@v: ［ `timeline-trigger-exit-range-start$p ／ `timeline-trigger-exit-range-end$p ］用には、［始端／終端］は，当の`時列線~誘発体$の`入口~範囲$tTの［始端／終端］に等しくなる。 ◎ The start (for timeline-trigger-exit-range-start) or end (for timeline-trigger-exit-range-end) is equal to the start/end of the timeline trigger’s enter range.

5.2.5. `timeline-trigger^p 略式

◎名 `timeline-trigger@p ◎値 none | [ `timeline-trigger-name$tp `timeline-trigger-source$tp `timeline-trigger-range$tp [ '/' `timeline-trigger-exit-range$tp ]? ]# ◎初個々の~propを見よ ◎適個々の~propを見よ ◎継個々の~propを見よ ◎百個々の~propを見よ ◎算個々の~propを見よ ◎ア個々の~propを見よ ◎順文法に従う ◎表終 ◎ Name: timeline-trigger Value: none | [ <'timeline-trigger-name'> <'timeline-trigger-source'> <'timeline-trigger-range'> [ '/' <'timeline-trigger-exit-range'> ]? ]# Initial: see individual properties Applies to: see individual properties Inherited: see individual properties Percentages: see individual properties Computed value: see individual properties Animation type: see individual properties Canonical order: per grammar

`timeline-trigger$p `略式~prop$は、次に挙げる~propを一緒に設定する ⇒＃ `timeline-trigger-name$p, `timeline-trigger-source$p, `timeline-trigger-range$p, 任意選択で† `timeline-trigger-exit-range$p 【† すなわち，省略時は初期~値に設定される】 ◎ The timeline-trigger shorthand property sets all of timeline-trigger-name, timeline-trigger-source, timeline-trigger-range, and optionally timeline-trigger-exit-range at once.

値 `none@v は、 `none none normal^v と等価になる。 ◎ A value of none is equivalent to none none normal.

注記：この略式~propを成す値たちは、構文に指定されたとおりの順序で与える必要がある — 他では共通的な，どの順序でも設定-可能ではなく。さもなければ、［ `timeline-trigger-name$p と `timeline-trigger-source$p 内の`時列線$の名前］や［ `入口~範囲$tTと`出口~範囲$tT ］が多義的になり得るので。 ◎ Note: Due to significant potential ambiguities in the syntax (timeline-trigger-name vs timeline names in timeline-trigger-source; enter ranges vs exit ranges), this shorthand’s values must be given in the specified order, rather than being settable in any order as is more common.

5.3. ~event誘発体

`~event誘発体@ （ `event trigger^en ）は、当の要素に向けてある種の~event（ `Event$I ）が発火されたとき作動化される`誘発体$である。それは、［ `event-trigger$p 略式~propや, その下位propたち］を伴う【 `event-trigger-name$p が初期~値~以外をとる】要素~上で定義される。 ◎ An event trigger is a trigger which is activated when certain Events are fired at the element. It is defined on an element with the event-trigger shorthand property, or its longhands.

各`~event誘発体$は、［無状態, 有状態］いずれかとして定義し得る ⇒＃無状態なものは`入口~event群$eTのみを有する。有状態なものは［ `入口~event群$eT, `出口~event群$eT ］どちらも有する。

［ `入口~event群@eT ／ `出口~event群@eT ］は、いずれも，当の誘発体を作動化することになる~event†たちが成す集合である。［入口~event／出口~event ］は、そのような~eventの総称である。

【† 精確には、どの~eventに合致するかを指定する条件。通例的には、 ~event型を成す文字列（ `click^et など）として与えられる — `event-trigger-event$t を見よ。】

◎ An event trigger can be defined as either stateless or stateful: • If stateless, it has a single set of enter events that activate it. • If stateful, it has two sets of events, its enter events and another set of exit events.

`~event誘発体$ %誘発体は、 ~page上で ~AND↓ を満たす `Event$I ~objが発火されたとき，作動化されることになる：

その`~target$【！`target$m】 ~EQ %誘発体を定義している要素

この条件（ある提案による）は，［当の~eventの`~target$ ~EQ 当の要素］か否かしか~careしないものと指定しているが、おそらく，［浮上する／捕捉する］ことも許容するよう求まれる — 場合によっては、任意選択で。【この段落は、原文では他所に記されている（そのため、意図不明になっていた）。】
%誘発体の［ `入口~event群$eT／`入口~event群$eT ］を成すいずれかに合致する

◎ Event triggers are activated when one of its associated Events are fired on the page with the trigger-defining element as its target.＼

各［有状態な`~event誘発体$ ］ %誘発体には、 `誘発されたか@eT 【！誘発体~状態】が結付けられる — それは、真偽値をとり，初期~時は ~F とする： ◎ If it’s stateful, it has a binary trigger state associated with it, initially "untriggered":＼

~F をとる間は、 %誘発体は，それを定義している要素が［ %誘発体の`入口~event群$eTを成すいずれかに合致する~event ］を受取ったとき限り作動化され、 %誘発体に結付けられた `入口~動作@eT を遂行することに加え， %誘発体の`誘発されたか$eTを ~T へ切替える。 ◎ while "untriggered", it only activates when the defining element receives one of its enter events, performing an associated enter action and switching its trigger state to "triggered";＼
~T をとる間は、 %誘発体は，それを定義している要素が［ %誘発体の`出口~event群$eTを成すいずれかに合致する~event ］を受取ったとき限り作動化され、 %誘発体に結付けられた `出口~動作@eT を遂行することに加え， %誘発体の`誘発されたか$tTを ~T へ切替える。 ◎ while "triggered", it only activates when it receives one of its exit events, performing an associated exit action and switching its trigger state back to "untriggered".

【 `誘発されたか$eTは、原文では “`trigger state^en（誘発体~状態）” と称され，［ "`untriggered^en", "`triggered^en" ］をとり得るものと定義されるが、この訳では，真偽-~flagで表現することにする。】

無状態な`~event誘発体$ %誘発体には、その`誘発-~instance$用の動作を正確に 1 個だけ与えなければナラナイ。有状態な`~event誘発体$には、 1 個か 2 個を与えれる。 %誘発体の`入口~動作$eTは， 1 個目に供されたそれになる。 %誘発体が無状態ならば、その`出口~動作$eTは，［ 2 個目が供されたならばそれ／他の場合は何もしない動作］になる。 ◎ A stateless event trigger must be given exactly one action for its trigger instance. A stateful one can be given one or two: the first is its enter action, and the second, if provided, is its exit action; if the second is not provided, the exit action is to do nothing.

注記：無状態な`~event誘発体$と有状態な`~event誘発体$は、【後者に】動作が 1 個【`入口~動作$eT用のそれ】しかアテガわれなかった場合でも，異なるように動作する。有状態かつ動作が 1 個だけのものは、 `入口~event$を受取ってから，`出口~event$を受取るまでは、実質的に “オフ” になる — その間に受取った他の`入口~event$を無視して。一方で，無状態な`~event誘発体$は、各`入口~event$に対し，毎回~動作を誘発することになる。 ◎ Note: A stateful and stateless event trigger act differently even if you only assign a single action; a single-action stateful event trigger will effectively "turn off" until it receives one of its exit events, ignoring any of the enter events after the first, while a stateless one will repeatedly trigger for every enter event.

要素は，複数個の`~event誘発体$を定義し得るが、それらが利用する~event型【！ `Event$I 】たちは［同じになる／異なる］必要はない。 `event-trigger$p の下位propたちが成す集合は、 `協調している~list~prop~group$を形成する。 `event-trigger-name$p が， `協調している基底~list~prop$になり、 `協調される値~list$を成す各~itemは， 1 個の`~event誘発体$を成す~prop群を定義する。 ◎ An element can define multiple event triggers, using the same Events or different ones. The set of event-trigger longhands form a coordinating list property group, with event-trigger-name as the coordinating list base property, and each item in the coordinated value list defining the properties of a single event trigger. ◎ ↑↑ The proposal I drew this text from specified that it only cares if the element is the *target* of the event. We probably want to allow for bubbling and/or capturing, possibly as an opt in/out.

5.3.1. 誘発体の命名-法： `event-trigger-name^p ~prop

◎名 `event-trigger-name@p ◎値 `none$v | `dashed-ident$t# ◎初 `none$v ◎適すべての要素 ◎継されない ◎百受容しない ◎算指定されたとおり ◎ア ~animate不可 ◎順文法に従う ◎表終 ◎ Name: event-trigger-name Value: none | <dashed-ident># Initial: none Applies to: all elements Inherited: no Percentages: N/A Computed value: as specified Canonical order: per grammar Animation type: not animatable

`none^v が指定された場合、当の要素は，`~event誘発体$を定義しない。 ◎ If none is specified, the element does not define any event triggers.

~list内に同じ `dashed-ident$t が複数回~現れる場合、最後のものに限り`~event誘発体$を定義する — それ以外のものには効果は無い。 ◎ If the same <dashed-ident> appears multiple times in the list, only the last one defines a event trigger; the preceding ones have no effect.

5.3.2. ~eventの~link法： `event-trigger-source^p ~prop

◎名 `event-trigger-source@p ◎値 [ `none$v | `event-trigger-event$t+ [ / `event-trigger-event$t+ ]? ]# ◎初 `none$v ◎適すべての要素 ◎継されない ◎百受容しない ◎算指定されたとおり ◎ア ~animate不可 ◎順文法に従う ◎表終 ◎ Name: event-trigger-source Value: [ none | <event-trigger-event>+ ]# Initial: none Applies to: all elements Inherited: no Percentages: N/A Computed value: as specified Canonical order: per grammar Animation type: not animatable

`event-trigger-source$p ~propは、どの~event（たち）が`~event誘発体$を作動化するかを指定する。その値は： ◎ The event-trigger-source property specifies what event or events activate the event trigger. Its values are

`none@v: `協調される値~list$を成す対応する~entryは、 `~event誘発体$を定義しない。 ◎ The corresponding entry in the coordinated value list does not define a trigger.
`event-trigger-event$t+ [ / `event-trigger-event$t+ ]?: 当の`~event誘発体$が，どの~event（たち）に応答するようになるかを定義する。 ◎ Defines what event(s) the event trigger responds to.; 値に `/^c を利用した場合、当の`~event誘発体$は，有状態になる — `/^c より［前／後］にある~eventたちが，当の`~event誘発体$の［ `入口~event群$eT／`出口~event群$eT ］を成す。【！(The same events can occur in both sets.)】 ◎ If a / is used in the value, the event trigger is stateful; the set of events before the / are the event trigger’s enter events, while those after the / are the exit events. (The same events can occur in both sets.); 他の場合、当の`~event誘発体$は，無状態になる — 供された~eventたちは，その`入口~event群$eTを成す。 ◎ Otherwise, the event trigger is stateless, and the provided events are its enter events.

`event-trigger-event@t
	= activate
	| click
	| touch
	| dblclick
	| keypress(`string$t)
	| ...

取扱うことが求まれる~eventたちが成す全部的な集合を解明する。 ◎ Figure out the full set of events we want to handle.

5.3.3. `event-trigger^p 略式

◎名 `event-trigger@p ◎値 `none$v | [ `event-trigger-name$p `event-trigger-source$p ]# ◎初 `none$v ◎適すべての要素 ◎継されない ◎百受容しない ◎算指定されたとおり ◎ア ~animate不可 ◎順文法に従う ◎表終 ◎ Name: event-trigger Value: none | [ <'event-trigger-name'> <'event-trigger-source'> ]# Initial: none Applies to: all elements Inherited: no Percentages: N/A Computed value: as specified Canonical order: per grammar Animation type: not animatable

`event-trigger$p `略式~prop$は、その下位prop［ `event-trigger-name$p, `event-trigger-source$p ］を一緒に設定する。 ◎ The event-trigger shorthand property sets both event-trigger-name and event-trigger-source at once.

値 `none@v は、 `none none^v と等価になる。 ◎ A value of none is equivalent to none none.

6. ~animation~event

6.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は無いことを表す）。

ただし， I に対応する~eventは、［当の~animationに`結付けられた効果$の`現在の反復~index$が前回の`~animation~frame$から変化した場合］に限り，配送される。

記号	~event	`経過d時間@
Ss	`animationstart$et	`区間~始端$
Se	`animationstart$et	`区間~終端$
Es	`animationend$et	`区間~始端$
Ee	`animationend$et	`区間~終端$
C	`animationcancel$et	（以下を見よ）
I	`animationiteration$et	（以下を見よ）

C に対応する~eventの`経過d時間$は、取消された~momentにおける~animationの`作動~時刻$として与えられ， `延伸~mode$に `両方^i 【, および確立-前の相】を利用する下で計算される。

I に対応する~eventの`経過d時間$は、次の手続きの結果になるものと定義される：

%前回の現-反復 ~LET 確立-前の~animation~frameにおける`現在の反復~index$
%反復~境界 ~LET 確立-後の~animation~frameにおける`現在の反復~index$
~IF［ %前回の現-反復 ~GT %反復~境界］ ⇒ %反復~境界 ~INCBY 1
~RET ( %反復~境界 ~MINUS `反復~始端$ ) ~MUL `反復~所要時間$

◎ 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. ◎ † The elapsed time for an animationiteration event is defined as follows: • Let previous current iteration be the current iteration from the previous animation frame. • If previous current iteration is greater than current iteration, let iteration boundary be current iteration + 1, otherwise let it be current iteration. • 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.

7. ~DOM~interface

7.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.

7.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/$ からの変更点 ◎ 10.1. Recent Changes ◎ Changes since the 2 March 2023 Working Draft include:: `animation-duration$p の`初期~値$として `auto^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$ からの変更点 ◎ 10.2. 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.