1. 序論
~INFORMATIVECSS Transitions `CSS3-TRANSITIONS$r (遷移効果)は、下層の~prop変化に応じて,~CSS~prop値が変化したときに補間する仕方を供する。 これは,単純な~animationを容易に行う仕方を供するが、~animationの開始-/終止-の状態は,既存の~prop値により制御され、~animationがどの様に進捗するかについては,限られた制御しか作者に供していない。 ◎ CSS Transitions [CSS3-TRANSITIONS] provide a way to interpolate CSS property values when they change as a result of underlying property changes. This provides an easy way to do simple animation, but the start and end states of the animation are controlled by the existing property values, and transitions provide little control to the author on how the animation progresses.
この仕様は、作者が一連の~keyframeを通して,時経過に伴う~CSS~propの変化を指定できるようにするための, `定義された~animation@ ( defined animation )を導入する。 ~animationは、時経過に伴う~CSS~propの 呈示上の値を変化させる点で,遷移効果に似る。 その主要な相違は、遷移効果が,~prop値が変化したときに 暗黙的に 【言い換えれば,受動的に】 誘発される一方で、~animationは,~animation~propが適用される際に 明示的に 【言い換えれば,能動的に】 実行される点にある。 この理由から、~animationは,~animateされる~propにあてがうための明示的な値を要する。 これらの値は,以下に述べる~animation~keyframeを利用して指定される。 ◎ This proposal introduces defined animations, in which the author can specify the changes in CSS properties over time as a set of keyframes. Animations are similar to transitions in that they change the presentational value of CSS properties over time. The principal difference is that while transitions trigger implicitly when property values change, animations are explicitly executed when the animation properties are applied. Because of this, animations require explicit values for the properties being animated. These values are specified using animation keyframes, described below.
次に挙げるものも含め、~animationの多くの側面を制御できる:
- 反復させる回数( `animation-iteration-count$p)
- 始値と終値を`交替$させる( `alternate$v )かどうか
- 稼働中( `running$v )に置くか静止-( `paused$v )させるか
- 実際の開始-時機を`遅延$させる( `animation-delay$p )
2. 値
【 この節の内容は CSS 日本語訳 共通ページ に委譲 】
3. ~animation
CSS Animations は、~propの`算出値$に影響する。 この効果は、( CSS Animations に適応する Level の)~CSS~cascadeに[ `~animation~level$の`指定値$ `CSS3CASCADE$r ]を追加して,[ ~animationの現在の状態を与える正しい`算出値$ ]を生産することにより、生じる。 ~animationは, ~important規則により上書きされるものを除く,通常の規則すべてを上書きする `CSS3CASCADE$r。 ◎ CSS Animations affect computed property values. This effect happens by adding a specified value to the CSS cascade ([CSS3CASCADE]) (at the level for CSS Animations) that will produce the correct computed value for the current state of the animation. As defined in [CSS3CASCADE], animations override all normal rules, but are overridden by !important rules.
同じ~propに対し,ある時点で同時に複数の~animationから 挙動が指定されている場合、 `animation-name$p 値の中で最後に現れる~animationが,その時点における他の~animationを上書きすることになる。 ◎ If at some point in time there are multiple animations specifying behavior for the same property, the animation which occurs last in the value of animation-name will override the other animations at that point.
【 “同時に” — いずれかに`遅延$, あるいは`延伸$が指定されていて,その期間のみ重なっている場合も、 “同時” とみなされる? 】
~animationは、それが[ 適用される時点(すなわち,要素に `animation-name$p ~propが設定された時点)より前 / 除去された後 ]の`算出値$には,影響しない。 加えて、~animationは概して,[ その遅延が満了する前 / その終止-後 ]の`算出値$にも影響しないが、 `animation-fill-mode$p ~propの値によっては影響することもある。 ◎ An animation does not affect the computed value before the application of the animation (that is, when the animation-name property is set on an element) or after it is removed. Furthermore, typically an animation does not affect the computed value before the animation delay has expired or after the end of the animation, but may do so depending on the animation-fill-mode property.
稼働中の~animationは,対象の~propの値を算出する。 ~CSS~cascadeに則って,他の値がその~animateされた値より優先されることもある。 `CSS3CASCADE$r ◎ While running, the animation computes the value of those properties it animates. Other values may take precedence over the animated value according to the CSS cascade ([CSS3CASCADE]).
~animationが適用されていて,まだ終えていない, あるいは 終えていても `animation-fill-mode$p は[ `forwards$v / `both$v ]にされている場合、~UAは,[ 要素~上の `will-change$p ~prop `css-will-change-1$r が,当の~animationにより~animateされているすべての~prop名をその値に含んでいる ]かのように動作し~MUST。 ◎ While an animation is applied but has not finished, or has finished but has an animation-fill-mode of forwards or both, the user agent must act as if the will-change property ([css-will-change-1]) on the element additionally includes all the properties animated by the animation.
~animationの開始-時機は,~animationを適用する~style, および対応する `keyframes$at 規則の両者が解決される時点になる。 要素に~animationが指定されつつ,対応する `keyframes$at 規則が未だ存在しない場合,開始されることはない — 【 `animation-name$p ~propが与える名前に 】 合致する `keyframes$at 規則を解決できるようになり次第,始めから開始することになる。 要素の~styleに対する動的な改変により指定される~animationは、その~styleが解決された時点に開始されることになる — それは、即時( `hover^ps などの疑似~style規則の場合)にも, ~scripting ~engineが~browserに制御を返した時点(~scriptにより~styleが適用された場合)にもなり得る。 `~keyframe~style規則$を動的に更新しても,~animationは開始-/再-開始されないことに注意。 ◎ The start time of an animation is the time at which the style applying the animation and the corresponding @keyframes rule are both resolved. If an animation is specified for an element but the corresponding @keyframes rule does not yet exist, the animation cannot start; the animation will start from the beginning as soon as a matching @keyframes rule can be resolved. An animation specified by dynamically modifying the element’s style will start when this style is resolved; that may be immediately in the case of a pseudo style rule such as hover, or may be when the scripting engine returns control to the browser (in the case of style applied by script). Note that dynamically updating keyframe style rules does not start or re-start an animation.
~animationは、その名前が,要素~上の `animation-name$p ~propの`算出値$の中のいずれかの識別子として現れ, かつ その~animationが妥当な `keyframes$at 規則を利用している場合に,要素に適用される。 いったん~animationが開始されたなら、終止するか, または `animation-name$p が除去されるまで,継続される。 稼働中の~animationに対し`~animation~prop$の値を変更した場合、始めからその値にされていたかのように~animationに適用される。 例えば, `animation-delay$p を短くすれば、~animationは,前方へ飛ぶか, または 即時に終えて `animationend$et ~eventが配送されることになる。 逆に, `animation-delay$p を引き伸ばせば、~animationは再-開始され得る — その場合、 `animationstart$et ~eventが配送されることになる。 ◎ An animation applies to an element if its name appears as one of the identifiers in the computed value of the animation-name property and the animation uses a valid @keyframes rule. Once an animation has started it continues until it ends or the animation-name is removed. Changes to the values of animation properties while the animation is running apply as if the animation had those values from when it began. For example, shortening the animation-delay may cause the animation to jump forwards or even finish immediately and dispatch an animationend event. Conversely, extending the animation-delay may cause an animation to re-start and dispatch an animationstart event.
`animation-name$p の中で,同じ `keyframes$at 規則~名が繰返されてもよい。 `animation-name$p が変化したときは、~animationの新たな~listを最後から最初の順に反復して、その各~animation名に対し,既存の~animation~list内で最後に合致する~animation名を見出すことにより、既存の~animationは更新される。 合致するものが見出された場合、既存の~animationは,[ 新たな~list内での,~animation名の位置 ]に対応する各種~animation~propを利用して更新される — ただし,上に述べたように、その現在の再生~時刻は保守する。 合致した~animationは、重ねて合致することの無いよう,既存の~animation~listから除去される。 合致するものが見出されなかった場合、新たな~animationが作成される。 その結果、例えば `animation-name$p を "`a^v" から "`a, a^v" に更新した場合、 `a^v に対する既存の~animationは~list内の2 個目の~animationになり,~list内の 1 個目の項に対し新たな~animationが作成されることになる。 ◎ The same @keyframes rule name may be repeated within an animation-name. Changes to the animation-name update existing animations by iterating over the new list of animations from last to first, and, for each animation, finding the last matching animation in the list of existing animations. If a match is found, the existing animation is updated using the animation properties corresponding to its position in the new list of animations, whilst maintaining its current playback time as described above. The matching animation is removed from the existing list of animations such that it will not match twice. If a match is not found, a new animation is created. As a result, updating animation-name from ‘a’ to ‘a, a’ will cause the existing animation for ‘a’ to become the second animation in the list and a new animation will be created for the first item in the list.
div {
animation-name: diagonal-slide;
animation-duration: 5s;
animation-iteration-count: 10;
position: relative; /* `left^p, `top^p を有効化 */
}
@keyframes diagonal-slide {
from {
left: 0;
top: 0;
}
to {
left: 100px;
top: 100px;
}
}
これは、要素を 5 秒間に (0, 0) から (100px, 100px) へ移動させて,それをあと 9 回~繰返す(したがって計 10 回の反復)~animationを生産することになる。 ◎ This will produce an animation that moves an element from (0, 0) to (100px, 100px) over five seconds and repeats itself nine times (for a total of ten iterations).
`display$p ~propが `none^v にされた場合、要素とその子孫に適用されている,稼働中のどの~animationも終了させる。 要素の `display$p が `none^v から他の値に更新された場合、 `animation-name$p ~propにより要素に適用されているすべての~animationに加え, `display$p が `none^v でない子孫に適用されるすべての~animationも開始させる。 ◎ Setting the display property to none will terminate any running animation applied to the element and its descendants. If an element has a display of none, updating display to a value other than none will start all animations applied to the element by the animation-name property, as well as all animations applied to descendants with display other than none.
~animationは 内容を動的に変化させるものであり,一部の利用者に光過敏性発作( seizure )を引き起こし得る。 内容が光過敏性発作を避ける仕方については 指針 2.3 : 光過敏性発作を引き起こさないように内容を設計すること `WCAG20$r を参照。 ◎ While authors can use animations to create dynamically changing content, dynamically changing content can lead to seizures in some users. For information on how to avoid content that can lead to seizures, see Guideline 2.3: Seizures: Do not design content in a way that is known to cause seizures ([WCAG20]).
実装は、対話的( interactive )でない媒体へ具現化する際には(例えば印刷時),~animationを無視してもよい。 この仕様の将来~versionは、その種の媒体への具現化-法を定義し得る。 ◎ Implementations may ignore animations when the rendering medium is not interactive e.g. when printed. A future version of this specification may define how to render animations for these media.
4. ~keyframe
~animateされる~propに,~animationの様々な時点における値を指定するためには、一連の~keyframeを利用する。 これらの~keyframeは、~animationの 1 周回の挙動を指定する — すなわち、~animationは 0 回以上 反復させられる。 ◎ Keyframes are used to specify the values for the animating properties at various points during the animation. The keyframes specify the behavior of one cycle of the animation; the animation may iterate zero or more times.
一連の~keyframeは、以下に定義される `keyframes@at at-規則を利用して指定される: ◎ Keyframes are specified using the @keyframes at-rule, defined as follows:
@keyframes = @keyframes `keyframes-name$t { `rule-list$t } `keyframes-name@t = `custom-ident$t | `string$t `keyframe-block@t = `keyframe-selector$t# { `declaration-list$t } `keyframe-selector@t = from | to | `percentage$t
`keyframes$at の内側の `rule-list$t が包含できるのは、 `keyframe-block$t 規則に限られる。 ◎ The <rule-list> inside of @keyframes can only contain <keyframe-block> rules.
`keyframe-block$t の内側の `declaration-list$t は、この仕様に定義されるものを除くどの~CSS~propも受容することに加え、 `animation-timing-function$p ~propも受容し,それを特別に解釈する。 どの~propも~cascadeと相互作用することはない(よって、 ~importantの利用は,~propを無効にし、その~propは無視されることになる)。 ◎ The <declaration-list> inside of <keyframe-block> accepts any CSS property except those defined in this specification, but does accept the animation-timing-function property and interprets it specially. None of the properties interact with the cascade (so using !important on them is invalid and will cause the property to be ignored).
`keyframes$at ~blockには、その導入部( `keyframes-name$t )における[ `custom-ident$t または `string$t ]値により,名前が付与される。 この 2 つの構文は、機能的には等価になる。 通常の[ `custom-ident$t / `string$t ]に対するときのように、この名前は全部的に`文字大小区別$である。 加えて、 `custom-ident$t からは~keyword `none$v も除外される 【下の例に示されるように、文字大小無視で合致するものも含めて】 。 ◎ A @keyframes block has a name given by the <custom-ident> or <string> in its prelude. The two syntaxes are equivalent in functionality; the name is the value of the ident or string. As normal for <custom-ident>s and <string>s, the names are fully case-sensitive; two names are equal only if they are codepoint-by-codepoint equal. The <custom-ident> additionally excludes the none keyword.
例えば、次の 2 つの `keyframes$at 規則の名前は同じになるので,最初の方は無視されることになる: ◎ For example, the following two @keyframes rules have the same name, so the first will be ignored:
@keyframes foo { ... } @keyframes "foo" { ... }
一方で、次の `keyframes$at 規則の名前は,前の 2 つの規則と異なる: ◎ On the other hand, the following @keyframes rule’s name is different from the previous two rules:
@keyframes FOO { ... }
次の `keyframes$at 規則は、 `custom-ident$t に許容されない値を利用しているので,無効になる: ◎ The following @keyframes rules are invalid because they use disallowed <custom-ident> values:
@keyframes initial { ... } @keyframes None { ... }
しかしながら,これらの名前は `string$t で指定できるので、次のいずれも妥当になる: ◎ However, those names *can* be specified with a <string>, so the following are both valid:
@keyframes "initial" { ... } @keyframes "None" { ... }
`keyframe-block$t の導入部は、一連の `keyframe-selector$t — `~keyframe選択子@ — からなる,~comma区切りの~listであり、各 `選択子の値@ は,[ 百分率, ~keyword `from^v, ~keyword `to^v ]のいずれかをとる。 これらの値は、この~keyframeが表現する[ ~animationの`所要時間$に対する割合 ]を指定する†。 ~keyframe自身は、その選択子に伴われる~block内で宣言される一連の~prop値により指定される。 ~keyword[ `from^v / `to^v ]は,値[ `0%^v / `100%^v ]と等価になる。 `0%^v を下回る値や `100%^v を上回る値は,無効であり、その `keyframe-block$t は無視される。 ◎ The <keyframe-selector> for a <keyframe-block> consists of a comma-separated list of percentage values or the keywords from or to. The selector is used to specify the percentage along the duration of the animation that the keyframe represents. The keyframe itself is specified by the block of property values declared on the selector. The keyword from is equivalent to the value 0%. The keyword to is equivalent to the value 100%. Values less than 0% or higher than 100% are invalid and cause their <keyframe-block> to be ignored.
注記: 百分率~値には,百分率 単位~指定子( "`%^css" )が利用されなければならない — `0^v は、`~keyframe選択子$としては妥当でない。 ◎ Note that the percentage unit specifier must be used on percentage values. Therefore, 0 is an invalid keyframe selector.
【† すなわち、~animationの 1 周回の中の いくつかの時点を(その所要時間に対する割合により) “選択する” 。 】【 `~keyframe選択子$や `選択子の値$などの用語は、原文では用語として定義されて(~mark-upされて)いないが,他所に現れるこれらの語の意味を明確化するため、この訳では,用語として与えている — そのような用語は、他にもいくつかある。 】
[ `0%^v (または `from^v ) / `100%^v (または `to^v ) ]~keyframeが指定されていない場合、~UAは,~animateされる~propの`算出値$を利用して, `暗黙の@ [ `0%^v / `100%^v ]~keyframeを構築することになる。 ◎ If a 0% or from keyframe is not specified, then the user agent constructs a 0% keyframe using the computed values of the properties being animated. If a 100% or to keyframe is not specified, then the user agent constructs a 100% keyframe using the computed values of the properties being animated.
各 `keyframe-block$t 【 の `declaration-list$t 】 は、いくつかの `~keyframe~style規則@ — ~propとその値の組 — からなる。 これらの規則においては、次に該当する~propは無視される:
- この仕様にて定義される~prop — ただし、 `animation-timing-function$p は除く(その挙動は後述する)。
- ~importantが付与されているもの。 【~animationよりも~important宣言の方が優先度が高いので、その~cascade法と整合させるために,単に “無視される” ことにしているものと考えられる。】
複数の `keyframes$at 規則が,同じ名前を伴って定義されている場合、文書順で最後のものが優先され,他のものは無視される。 ◎ If multiple @keyframes rules are defined with the same name, the last one in document order wins, and all preceding ones are ignored.
div { animation-name: slide-right; animation-duration: 2s; } @keyframes slide-right { from { margin-left: 0px; } 50% { margin-left: 110px; opacity: 1; } 50% { opacity: 0.9; } to { margin-left: 200px; } }
1 秒 経過した時点で、名前 `slide-right^css の~animationは,次の 50% 規則が定義されていたときと同じ状態になる: ◎ At the 1s mark, the slide-right animation will have the same state as if we had defined the 50% rule like this:
@keyframes slide-right { 50% { margin-left: 110px; opacity: 0.9; } to { margin-left: 200px; } }
一連の~keyframeを決定するため、それらはまず,`選択子の値$により `時系列順@(昇順)に~sortされた上で、 `keyframes$at 規則の中で,各 規則が~cascadeされる — したがって,~keyframeの一連の~propは、`選択子の値$が同じであるような複数の `keyframes$at 規則から導出され得る。 ◎ To determine the set of keyframes, all of the values in the selectors are sorted in increasing order by time. The rules within the @keyframes rule then cascade; the properties of a keyframe may thus derive from more than one @keyframes rule with the same selector value.
【 2 つの`選択子の値$が(抽象的な数として)非常に近い場合(例えば "0%" と "0.00000001%" など)、実装の数値精度に依存して,同じ値に見なされるかもしれない(どの程度の精度まで確保されるかについては、(現時点では) `CSS-VALUES-3$r の中では言及されていない)。 】
~propが,ある~keyframeにおいて指定されていなかった場合,または 指定されているが妥当でない場合、その~propの~animationは,その~keyframeが存在しなかったかのように進行する。 概念的には、いずれかの~keyframe内に在するような~propのそれぞれに対し,~keyframeの集合が構築された上で、各~propに対し,~animationが独立に稼働するかのように。 ◎ If a property is not specified for a keyframe, or is specified but invalid, the animation of that property proceeds as if that keyframe did not exist. Conceptually, it is as if a set of keyframes is constructed for each property that is present in any of the keyframes, and an animation is run independently for each property.
@keyframes wobble { 0% { left: 100px; } 40% { left: 150px; } 60% { left: 75px; } 100% { left: 100px; } }
名前 "wobble" の~animationに対し,4個の~keyframeが指定されている。 最初の~keyframeにより~animateされる `left$p ~propの値は `100px^v になり、~animation周回の始まりにて示される。 ~animation`所要時間$の 40% 経過時点で, `left$p は `150px^v まで~animateされる。 ~animation`所要時間$の 60% の時点で, `left$p は `75px^v へ戻る様に ~animateされる。 ~animation周回の終端-時における `left$p の値は `100px^v に戻される。 下の図式に,`所要時間$に `10s^v が与えられた場合の~animationの状態を示す。 ◎ Four keyframes are specified for the animation named "wobble". In the first keyframe, shown at the beginning of the animation cycle, the value of the left property being animated is 100px. By 40% of the animation duration, left has animated to 150px. At 60% of the animation duration, left has animated back to 75px. At the end of the animation cycle, the value of left has returned to 100px. The diagram below shows the state of the animation if it were given a duration of 10s.
【 上の~animationを,利用中の~browserで試す — 下のボックスをクリックして~~開始/~~停止: 】
この仕様は、 CSS Transitions の 遷移の適用 節の様に,~keyframeから値がどう決定されるかを定義する必要がある。 ◎ This specification needs to define how the value is determined from the keyframes, like the section on Application of transitions does for CSS Transitions.
4.1.~keyframe用の計時~関数
それぞれの `~keyframe~style規則$では、~animationが次の~keyframeへ移行するときに利用される`計時~関数$を宣言できる。 ◎ A keyframe style rule may also declare the timing function that is to be used as the animation moves to the next keyframe.
@keyframes bounce { from { top: 100px; animation-timing-function: ease-out; } 25% { top: 50px; animation-timing-function: ease-in; } 50% { top: 100px; animation-timing-function: ease-out; } 75% { top: 75px; animation-timing-function: ease-in; } to { top: 100px; } }
名前 "bounce" の~animationには、 5 個の~keyframeが指定されている。 1 個目と 2 個目の~keyframeの合間(すなわち, 0% 〜 25% )には, `ease-out$v `計時~関数$が利用され、 2 個目と 3 個目の~keyframeの合間(すなわち, 25% 〜 50% )には, `ease-in$v `計時~関数$が利用される,等々。 その効果は、次の様に現れることになる: 要素は頁の上方へ `50px^v 移動され, その最高点に近付くに連れて動きは~~緩められ, `100px^v の所まで落下するに連れて動きは~~速められる。 ~animationの後半では、要素が `25px^v だけ頁~上方へ移動されることを除き,似た様に挙動する。 ◎ Five keyframes are specified for the animation named "bounce". Between the first and second keyframe (i.e., between 0% and 25%) an ease-out timing function is used. Between the second and third keyframe (i.e., between 25% and 50%) an ease-in timing function is used. And so on. The effect will appear as an element that moves up the page 50px, slowing down as it reaches its highest point then speeding up as it falls back to 100px. The second half of the animation behaves in a similar manner, but only moves the element 25px up the page.
"`to^v" ( `100%^v )~keyframe上に指定されている`計時~関数$は,無視される。 ◎ A timing function specified on the to or 100% keyframe is ignored.
~~詳細は `animation-timing-function$p ~propにて。 ◎ See the animation-timing-function property for more information.
4.2. `animation-name^p ~prop
`animation-name$p ~propは、適用される~animationの~listを定義する。 その値の中の各 名前は、[ ~animation用の~prop値を供する `keyframes$at at-規則 ]を選択するために利用される。 どの `keyframes$at at-規則にも合致しない名前に対しては、~animateされる~propは存在せず,~animationは実行されないことになる。 これを,~cascade処理から生じる~animationの上書きに利用できる。 複数の~animationが,同じ~propを改変しようと試みている場合、名前が~listの末尾側に最も近い~animationが優先される。 ◎ The animation-name property defines a list of animations that apply. Each name is used to select the keyframe at-rule that provides the property values for the animation. If the name does not match any keyframe at-rule, there are no properties to be animated and the animation will not execute. Furthermore, if the animation name is none then there will be no animation. This can be used to override any animations coming from the cascade. If multiple animations are attempting to modify the same property, then the animation closest to the end of the list of names wins.
名前により挙げられる各~animationは、他の各種`~animation~prop$(以下の各節に挙げられる)用に,対応する値を持つべきである。 他の`~animation~prop$にあてがわれた~comma区切りの値の~list %~list は、[ ~animationの開始-時点に `animation-name$p に与えられている~list ]の長さ %L と同じに揃えられるよう,最初の値から対応付けられる:
- %~list の末尾側にある, %L 個を超える部分の値は利用されない。
- %~list にあてがわれている値が %L 個に満たない場合、~UAは, %L 個 の値が得られるまで %~list を繰返す†ことにより、その`使用値$を算定しなければならない 【値が 0 個の場合(全くあてがわれていない場合)、初期値が利用されることになる。】
- この切り捨て/繰返しは、`算出値$には影響しない。
注記: これは、 `background-*^p ~propの挙動に類似する( `background-image$p が `animation-name$p の役割に類似する)。 【参照 】 ◎ Note: This is analogous to the behavior of the background-* properties, with background-image analogous to animation-name.
◎名 `animation-name@p ◎値 [ none | `keyframes-name$t ]# ◎初 `none$v ◎適 すべての要素, および `before$pe, `after$pe 疑似要素 ◎ all elements, ::before and ::after pseudo-elements ◎継 されない ◎百 受容しない ◎算 指定値 ◎順 文法に従う ◎ア 不可 ◎表終各種 値の意味は: ◎ The values of animation-name have the following meanings:
- `none@v
- `keyframes$at は全く指定されず,~animationはない。 この~animationに指定される他のどの`~animation~prop$も効果を持たない。 ◎ No keyframes are specified at all, so there will be no animation. Any other animations properties specified for this animation have no effect.
- `keyframes-name$t
- ~animationは、 `keyframes-name$t に指定された名前の `keyframes$at を利用する。 その様な名前の `keyframes$at 規則が無ければ、~animationも無い。 ◎ The animation will use the keyframes with the name specified by the <keyframes-name>, if they exist. If no @keyframes rule with that name exists, there is no animation.
4.3. `animation-duration^p ~prop
`animation-duration$p ~propは、~animationの 1 周回の `所要時間@ を定義する。 ◎ The animation-duration property defines duration of a single animation cycle.
◎名 `animation-duration@p ◎値 `time$t # ◎初 `0s^v ◎適 すべての要素, および `before$pe, `after$pe 疑似要素 ◎ all elements, ::before and ::after pseudo-elements ◎継 されない ◎百 受容しない ◎算 指定値 ◎順 文法に従う ◎ア 不可 ◎表終- `time$t
- ~animationの 1 周回にかかる時間の長さを指定する。 負の `time$t は無効。 ◎ The <time> specifies the length of time that an animation takes to complete one cycle. A negative <time> is invalid.
-
`time$t に対する `0s^v (初期値)は、~animationを瞬時に終わらせる。 `keyframes$at の効果はなくなるが、~animationそれ自体は生じる — 特に、開始-/終止-~event( `animationstart$et / `animationend$et )は発火され、 `animation-fill-mode$p の定義により,その値に応じて:
- `backwards$v / `both$v ならば ⇒ `animation-delay$p の間に~animationの最初の~frameが表示される。
- `forwards$v / `both$v ならば ⇒ 次に,~animationの最後の~frameが表示される。
- `none^v ならば ⇒ ~animationによる視覚的~効果はない。
4.4. `animation-timing-function^p ~prop
`animation-timing-function$p ~propは、`計時~関数$ — ~animationが 各~keyframe間で どう進捗するか — を記述する。 計時~関数は、 CSS Timing Functions ~module `CSS-TIMING$r にて別に定義される。 ◎ The animation-timing-function property describes how the animation will progress between each pair of keyframes. Timing functions are defined in the separate CSS Timing Functions module [css-timing].
`入力~進捗~値$には、 `animation-direction$p ~propによる効果を組入れた上で†,現在の~keyframeの`所要時間$に対する ~keyframeの開始から経過した時間の割合が利用される。 【†すなわち,逆方向に再生されるときは、計時~関数も逆方向に進める。】 ◎ The input progress value used is the percentage of the time elapsed between the current keyframe and the next keyframe after incorporating the effect of the animation-direction property.
`animation-delay$p の間は、 `animation-timing-function$p は適用されない。 ◎ During the animation-delay, the animation-timing-function is not applied.
注記: この定義は必要とされる — さもなければ,`計時~関数$が`階段~計時~関数$であって,その`段~位置$が `start$v にされている場合、 `backwards$v による`延伸$の間,関数の最初の段の上端側の`出力~進捗~値$を生産することになるので。 ◎ Note: This definition is necessary because otherwise a step timing function with a step position of start would produce a backwards fill equal to the top of the first step in the function.
`出力~進捗~値$は、現在の~keyframeと次の~keyframeの間の~prop値を補間するときの %p 値 として利用される。 ◎ The output progress value is used as the p value when interpolating the property values between the current and next keyframe.
◎名 `animation-timing-function@p ◎値 `timing-function$t # ◎初 `ease^v ◎適 すべての要素, および `before$pe, `after$pe 疑似要素 ◎ all elements, ::before and ::after pseudo-elements ◎継 されない ◎百 受容しない ◎算 指定値 ◎順 文法に従う ◎ア 不可 ◎表終~keyframe内†に指定された `animation-timing-function$p は、その~keyframeから`時系列順$で††次の[ `animation-timing-function$p を定義するような~keyframe ], もしくは `100%^v ~keyframe(`暗黙の$それも含む)までの,~animationの進展を定義する。 ◎ When specified in a keyframe, animation-timing-function defines the progression of the animation between the current keyframe and the next keyframe for the animating property in sorted keyframe selector order (which may be an implicit 100% keyframe).
【† すなわち, `keyframe-block$t 内の `declaration-list$t 内 】【†† すなわち,~keyframe`選択子の値$の昇順 】
4.5. `animation-iteration-count^p ~prop
`animation-iteration-count$p ~propは、~animationが再生される周回 数 — `反復~回数@ — を指定する。 初期値 `1^v は、~animationがその開始-から終止-までの間, 1 回だけ再生されることを意味する。 この~propは、 `animation-direction$p に対する値 `alternate$v と併用されることも多い — それは、`交替$周回において~animationを逆再生させることになる。 ◎ The animation-iteration-count property specifies the number of times an animation cycle is played. The initial value is 1, meaning the animation will play from beginning to end once. This property is often used in conjunction with an animation-direction value of alternate, which will cause the animation to play in reverse on alternate cycles.
~animationが作動中の時区間( `所要時間$ × `反復~回数$ )は、 `作動時間@ と呼ばれる。 ◎ The time window during which the animation is active (duration x iteration-count) is known as the active duration.
◎名 `animation-iteration-count@p ◎値 `single-animation-iteration-count$t # ◎初 `1^v ◎適 すべての要素, および `before$pe, `after$pe 疑似要素 ◎ all elements, ::before and ::after pseudo-elements ◎継 されない ◎百 受容しない ◎算 指定値 ◎順 文法に従う ◎ア 不可 ◎表終- `infinite@v
- ~animationは、永遠に繰返されることになる。 ◎ The animation will repeat forever.
- `number$t
- ~animationは、指定された回数だけ繰返されることになる。 数値が整数でない場合、~animationは最後の周回の中途で終止することになる。 負値は妥当でない。 ◎ The animation will repeat the specified number of times. If the number is not an integer, the animation will end partway through its last cycle. Negative numbers are invalid.
- 値 `0^v は妥当であり、 `animation-duration$p に対する値 `0s^v と同様,~animationを瞬時に終わらせる。 ◎ A value of 0 is valid and, similar to an animation-duration of 0s, causes the animation to occur instantaneously.
`所要時間$ `0s^v の~animationは、 `animation-iteration-count$p に対する妥当な値が何であれ — `infinite$v であっても — 瞬時に生じて終わる。 ◎ If the animation has a duration of 0s, it will occur instantaneously for any valid value of animation-iteration-count, including infinite.
4.6. `animation-direction^p ~prop
`animation-direction$p ~propは、~animationを どの周回において逆再生させるか を定義する。 ~animationが逆再生されるときは`計時~関数$も逆にされる。 例えば,逆再生されたときの `ease-in$v ~animation 【 `animation-timing-function$p の値が `ease-in$v にされた~animation 】 は、 `ease-out$v ~animationとして現れることになる。 ◎ The animation-direction property defines whether or not the animation should play in reverse on some or all cycles. When an animation is played in reverse the timing functions are also reversed. For example, when played in reverse an ease-in animation would appear to be an ease-out animation.
◎名 `animation-direction@p ◎値 `single-animation-direction$t # ◎初 `normal$v ◎適 すべての要素, および `before$pe, `after$pe 疑似要素 ◎ all elements, ::before and ::after pseudo-elements ◎継 されない ◎百 受容しない ◎算 指定値 ◎順 文法に従う ◎ア 不可 ◎表終- `normal@v
- ~animationのすべての反復は、指定に従って(順方向に)再生される。 ◎ All iterations of the animation are played as specified.
- `reverse@v
- ~animationのすべての反復は、指定とは逆方向に再生される ◎ All iterations of the animation are played in the reverse direction from the way they were specified.
- `alternate@v
- ~animationの各 周回のうち,奇数回目の反復は順方向に再生され,偶数回目の反復は逆方向に再生される。 ◎ The animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
- `alternate-reverse@v
- ~animationの各 周回のうち,奇数回目の反復は逆方向に再生され,偶数回目の反復は順方向に再生される。 ◎ The animation cycle iterations that are odd counts are played in the reverse direction, and the animation cycle iterations that are even counts are played in a normal direction.
注記: 反復の偶奇を決定する目的においては、回数は 1 から数えることに注意。 ◎ Note: For the purpose of determining whether an iteration is even or odd, iterations start counting from 1.
4.7. `animation-play-state^p ~prop
`animation-play-state$p ~propは、~animationを稼働中にするか/静止させるかを定義する。 ◎ The animation-play-state property defines whether the animation is running or paused.
◎名 `animation-play-state@p ◎値 `single-animation-play-state$t # ◎初 `running$v ◎適 すべての要素, および `before$pe, `after$pe 疑似要素 ◎ all elements, ::before and ::after pseudo-elements ◎継 されない ◎百 受容しない ◎算 指定値 ◎順 文法に従う ◎ア 不可 ◎表終- `running@v
- ~animationは、この~propが `running$v に設定されている間は,通常通りに進行する。 ◎ While this property is set to running, the animation proceeds as normal.
- `paused@v
-
この~propが `paused$v に設定されている間は、~animationは,それを制御する “時計” が停止されたかのように 静止され,それまでの進捗は要素に適用され続ける。 静止-が解かれた( `running$v に戻された)時点で、~animationは,時計が進み始めたかのように,その状態から開始される。 ◎ While this property is set to paused, the animation is paused. The animation continues to apply to the element with the progress it had made before being paused. When unpaused (set back to running), it restarts from where it left off, as if the "clock" that controls the animation had stopped and started again.
- 遅延の段階で `animation-play-state$p ~propが `paused$v にされた場合、遅延~時計も静止され, `running$v に戻され次第 再開される。 ◎ If the property is set to paused during the delay phase of the animation, the delay clock is also paused and resumes as soon as animation-play-state is set back to running.
4.8. `animation-delay^p ~prop
`animation-delay$p ~propは、~animationがいつ開始することになるかを定義する。 これは、~animationを,それが適用された時点から ある時間だけ経過した後に始めさせたり、あるいは,その時点より ある時間だけ前の時点ですでに実行が始まっていたかのように現れさせる。 ◎ The animation-delay property defines when the animation will start. It allows an animation to begin execution some time after it is applied, or to appear to have begun execution some time before it is applied.
◎名 `animation-delay@p ◎値 `time$t # ◎初 `0s^v ◎適 すべての要素, および `before$pe, `after$pe 疑似要素 ◎ all elements, ::before and ::after pseudo-elements ◎継 されない ◎百 受容しない ◎算 指定値 ◎順 文法に従う ◎ア 不可 ◎表終- `time@t
- ~animationの開始-(これらの~propを通して~animationが適用される時点)から,その実際の開始-までの遅延の長さを定義する。 遅延 `0s^v (初期値)は、~animationが適用され次第,その実行を開始させることを意味する。 ◎ The <time> defines how long of a delay there is between the start of the animation (when the animation is applied to the element via these properties) and when it begins executing. A delay of 0s (the initial value) means that the animation will execute as soon as it is applied.
- 負の遅延も妥当である。 遅延 `0s^v と同様に、それは,~animationを即時に実行に移すことを意味するが、~animationは遅延の絶対値の分だけ進捗され, 指定された時間だけ過去の時点ですでに開始されていたかのように — すなわち,その`作動時間$の中途から開始されるように — 現れさせる。 ~animationの開始値を与える ~keyframeが,`暗黙の$値をとる場合、その値は、過去の時点ではなく,~animationが開始した時点から得られる。 ◎ A negative delay is valid. Similar to a delay of 0s, it means that the animation executes immediately, but is automatically progressed by the absolute value of the delay, as if the animation had started the specified time in the past, and so it appears to start partway through its active duration. If an animation’s keyframes have an implied starting value, the values are taken from the time the animation starts, not some time in the past.
4.9. `animation-fill-mode^p ~prop
`animation-fill-mode$p ~propは、~animation実行の時間外に適用される値を定義する。 既定(初期値 `none^v )では、~animationは,次に挙げる期間においては,~prop値には影響しない:
- それが適用された時点(要素 上に `animation-name$p ~propが設定された時点)から実際に実行される時点( `animation-delay$p ~propにより決定される)までの間
- ~animationが終止した時点( `animation-duration$p, `animation-iteration-count$p ~propにより決定される)より後
`animation-fill-mode$p ~propにより,この挙動を上書きできる。 また、この~propが動的に更新されたときは、~animationの遅延の段階/終止した後, いずれの間かに従って,必要に応じて 【~animationが適用される】 各~prop値にも反映されることになる。
◎ The animation-fill-mode property defines what values are applied by the animation outside the time it is executing. By default, an animation will not affect property values between the time it is applied (the animation-name property is set on an element) and the time it begins execution (which is determined by the animation-delay property). Also, by default an animation does not affect property values after the animation ends (determined by the animation-duration and animation-iteration-count properties). The animation-fill-mode property can override this behavior. Dynamic updates to the property will be reflected by property values as needed, whether during the animation delay or after the animation ends.- `none@v
- ~animationは、適用されていても,実行されていない間の効果はない。 ◎ The animation has no effect when it is applied but not executing.
- `forwards@v
-
~animationは、終止した時点(その `animation-iteration-count$p により決定される)の~prop値を,その後にも引き続き適用することになる。 `animation-iteration-count$p が正 整数の場合、~animationが最後の反復を完了した時点の値が適用されることになる(次の反復の開始-時の値ではなく)。 `animation-iteration-count$p が 0 の場合、最初の反復の開始-時の値が適用されることになる( `animation-fill-mode$p が `backwards$v のときとちょうど同じになる)。 ◎ After the animation ends (as determined by its animation-iteration-count), the animation will apply the property values for the time the animation ended. When animation-iteration-count is an integer greater than zero, the values applied will be those for the end of the last completed iteration of the animation (rather than the values for the start of the iteration that would be next). When animation-iteration-count is zero, the values applied will be those that would start the first iteration (just as when animation-fill-mode is backwards).
- `backwards@v
-
~animationは, `animation-delay$p により定義される遅延期間の間,[ ~animationの最初の反復を開始させる~keyframe ]内で定義された一連の~prop値を適用することになる。 この~keyframeは、 `animation-direction$p 値に応じて,次のいずれかになる:
- `normal$v
- `alternate$v
- `from^v ( `0%^v )~keyframe
- `reverse$v
- `alternate-reverse$v
- `to^v ( `100%^v )~keyframe
- `both@v
- `forwards$v, `backwards$v 両~効果とも適用される。 ◎ The effects of both forwards and backwards fill apply.
4.10. `animation^p 略式~prop
`animation$p `略式~prop$は,~comma区切りによる~animation定義の~listである。 ~list内の各項目は、そのすべての下位propの,それぞれに対する値を与える。 これらの下位propは、 `~animation~prop@ とも総称される。 ( `animation$p 略式~propのみを用いて定義したときには生じることはないが、これらの下位propが与える~listの長さが互いに異なるときにどうなるかについては, `animation-name$p の定義を見よ。) ◎ The animation shorthand property is a comma-separated list of animation definitions. Each item in the list gives one item of the value for all of the subproperties of the shorthand, which are known as the animation properties. (See the definition of animation-name for what happens when these properties have lists of different lengths, a problem that cannot occur when they are defined using only the animation shorthand.)
◎名 `animation@p ◎値 `single-animation$t # ◎初 個々の~propを見よ ◎適 すべての要素, および `before$pe, `after$pe 疑似要素 ◎ all elements, ::before and ::after pseudo-elements ◎継 個々の~propを見よ ◎百 受容しない ◎算 個々の~propを見よ ◎順 文法に従う ◎ア 不可 ◎表終`single-animation@t = `time$t || `timing-function$t || `time$t || `single-animation-iteration-count$t || `single-animation-direction$t || `single-animation-fill-mode$t || `single-animation-play-state$t || [ `none^v | `keyframes-name$t ]
各~animation定義の中の順序は重要であることに注意: 各 `single-animation$t 内において、 `time$t に構文解析し得る値のうち, 1 個目の値が `animation-duration$p にあてがわれ, 2 個目の値が `animation-delay$p にあてがわれる。 ◎ Note that order is important within each animation definition: the first value in each <single-animation> that can be parsed as a <time> is assigned to the animation-duration, and the second value in each <single-animation> that can be parsed as a <time> is assigned to animation-delay.
各~animation定義の中での順序は、 `keyframes-name$t 値を他の~keywordと判別するためにも重要になることに注意。 構文解析-時には、[ `animation-name$p 以外の~propに妥当な~keywordであって, 値がこの略式~propの中でより前に現れていないもの ]は、 `animation-name$p に対するものではなく,それらの~propに対するものとして受容されなければならない。 更に,直列化する際には、それらの~propの既定~値は,少なくとも,別の~propの値にもなり得る `animation-name$p を判別できるように出力されなければならず、また,その必要がなくとも追加で出力されてよい。 ◎ Note that order is also important within each animation definition for distinguishing <keyframes-name> values from other keywords. When parsing, keywords that are valid for properties other than animation-name whose values were not found earlier in the shorthand must be accepted for those properties rather than for animation-name. Furthermore, when serializing, default values of other properties must be output in at least the cases necessary to distinguish an animation-name that could be a value of another property, and may be output in additional cases.
例えば、 animation: `3s none backwards^v を構文解析して得られた値( `animation-fill-mode$p は `none^v, `animation-name$p は `backwards^v になる)が, animation: `3s backwards^v に直列化されてはならない(これは `animation-fill-mode$p が `backwards^v, `animation-name$p が `none^v になる)。 ◎ For example, a value parsed from animation: 3s none backwards (where animation-fill-mode is none and animation-name is backwards) must not be serialized as animation: 3s backwards (where animation-fill-mode is backwards and animation-name is none).
5. ~animation ~event
~animationに関係する いくつかの~eventが、 DOM `Event^I ~system を通して可用である。 DOM ~eventは、~animationの[ 開始-と終止-, および各~反復の終端 ]の すべての時点において,生成される。 要素~上では,複数の~propが同時に~animateされ得る。 これが生じ得るのは、 `animation-name$p に指定されている,ある名前の `keyframes$at が複数の~propを含んでいるときや、 複数の `keyframes$at の名前が指定されていて, それぞれが異なる~propを含んでいるときである。 しかしながら,~eventの目的においては、要素~上の `animation-name$p の中の各 名前が 1 個の~animationを指定する。 すなわち,~eventが生成されるのは、~animateされる各~propごとではなく,各 名前ごとになる。 ◎ Several animation-related events are available through the DOM Event system. The start and end of an animation, and the end of each iteration of an animation, all generate DOM events. An element can have multiple properties being animated simultaneously. This can occur either with a single animation-name value with keyframes containing multiple properties, or with multiple animation-name values. For the purposes of events, each animation-name specifies a single animation. Therefore an event will be generated for each animation-name value and not necessarily for each property being animated.
妥当な`~keyframe規則$が定義されているどの~animationも、稼働して,~eventを生成することになる — これには、空の `~keyframe規則$を伴う~animationも含まれる。 ◎ Any animation for which a valid keyframe rule is defined will run and generate events; this includes animations with empty keyframe rules.
生成されて送信される各~eventには,~animationの経過時間も伴われる。 これにより,~event~handlerにおいては、~loop中の~animationの現在の反復や, `交替$~animationの現在の位置を決定できるようになる。 この経過時間には、~animationが `paused$v 状態にあった時間は含まれない。 【下の `elapsedTime$m の記述から、遅延時間も含まれない, もしくは 負の場合は “仮想の開始-時” からの経過時間になる。】 ◎ The time the animation has been running is sent with each event generated. This allows the event handler to determine the current iteration of a looping animation or the current position of an alternating animation. This time does not include any time the animation was in the paused play state.
5.1. `AnimationEvent^I ~interface
`AnimationEvent$I ~interfaceは、 Animation ~eventに結付けられている特定の文脈上の情報を供する。 ◎ The AnimationEvent interface provides specific contextual information associated with Animation events. ◎ 5.1.1. IDL Definition
[`Exposed$=Window, Constructor(`CSSOMString$ %type, optional `AnimationEventInit$I %animationEventInitDict)] interface `AnimationEvent@I : `Event$I { readonly attribute `CSSOMString$ `animationName$m; readonly attribute double `elapsedTime$m; readonly attribute `CSSOMString$ `pseudoElement$m; };
dictionary `AnimationEventInit@I : `EventInit$I { `CSSOMString$ `animationName@dm = ""; double `elapsedTime@dm = 0.0; `CSSOMString$ `pseudoElement@dm = ""; };
- `animationName@m ◎ animationName, of type CSSOMString, readonly
- ~eventを発火した~animationの `animation-name$p ~propの値。 ◎ The value of the animation-name property of the animation that fired the event.
- `elapsedTime@m ◎ elapsedTime, of type double, readonly
- この~eventが発火された時点における,~animationの経過時間(秒)。 ~animationが静止されていた時間は除外される。 この~memberに対する精確な計算は、各~event型ごとに定義される ◎ The amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. The precise calculation for of this member is defined along with each event type.
- `pseudoElement@m ◎ pseudoElement, of type CSSOMString, readonly
- ~animationが~CSS疑似要素 上で稼働している場合は,その疑似要素の名前(先頭は 2 個の~colon)になる(この場合,~eventの `target^m はその疑似要素の出自の要素になる)。 ~animationが要素 上で稼働している場合は空~文字列になる(すなわち~eventの `target^m はその要素)。 ◎ The name (beginning with two colons) of the CSS pseudo-element on which the animation runs (in which case the target of the event is that pseudo-element’s corresponding element), or the empty string if the animation runs on an element (which means the target of the event is that element).
- `AnimationEvent( type, animationEventInitDict )@m
- `~event構築子$。 ◎ AnimationEvent(type, animationEventInitDict) is an event constructor.
5.2. `AnimationEvent^I の種類
次の型の~eventが~animation ~eventとして生じ得る: ◎ The different types of animation events that can occur are:
- `animationstart@et
- `animationstart$et ~eventは、~animationの開始-時に生じる。 `animation-delay$p がある場合、この~eventは,それによる遅延期間が満了したときに発火することになる。 ◎ The animationstart event occurs at the start of the animation. If there is an animation-delay then this event will fire once the delay period has expired.
- この~eventに対する `elapsedTime$m 値は、 min( max( − `animation-delay$p の値, 0), `作動時間$ ) になる(遅延が負でなければ 0 )。 負の遅延に対しては、 `animation-play-state$p が[ `running$v / `paused$v ]に設定されたとき,発火されることになる。 ◎ A negative delay will cause the event to fire with an elapsedTime equal to the absolute value of the delay capped to the active duration of the animation, that is, min(max(-animation-delay, 0), active duration); in this case the event will fire whether animation-play-state is set to running or paused.
-
- 浮上する
- 取消~不可
- 文脈情報: `animationName$m, `elapsedTime$m, `pseudoElement$m
- `animationend@et
- この~eventは、~animationの終了時に生じる。 ◎ ↓
- この~eventに対する `elapsedTime$m 値は、`作動時間$になる。 ◎ The animationend event occurs when the animation finishes. In this case the value of the elapsedTime member of the event is equal to the active duration.
-
- 浮上する
- 取消~不可
- 文脈情報: `animationName$m, `elapsedTime$m, `pseudoElement$m
- `animationiteration@et
- この~eventは、 `animationend$et ~eventが同時に発火されることになる場合を除く,~animationの各 反復の終端~時に生じる。 したがって,この~eventは、`反復~回数$が 1 以下の~animationにおいては,生じないことになる。 【また、`所要時間$が 0 秒の場合も,`反復~回数$に関わらず生じないことになる。】 ◎ The animationiteration event occurs at the end of each iteration of an animation, except when an animationend event would fire at the same time. This means that this event does not occur for animations with an iteration count of one or less.
- この~eventに対する `elapsedTime$m 値は、 ( `animation-duration$p の値 × 反復し終えた回数 ) になる(すなわち,初回の回数は 1 )。 ◎ The elapsedTime member in this case is equal to the product of the current iteration and animation-duration where the current iteration is the zero-based index of the new iteration. For example, assuming no negative animation-delay, after one iteration completes the current iteration would be one.
-
- 浮上する
- 取消~不可
- 文脈情報: `animationName$m, `elapsedTime$m, `pseudoElement$m
- `animationcancel@et
- この~eventは、 `animationend$et ~eventが同時に発火されることになる場合を除く,稼働中の~animationが停止されたときに生じる — `animation-name$p が変更され 当の~animationが除去されたときや, ~animateしている要素または その先祖の `display$p が `none^v にされたときなど。 ◎ The animationcancel event occurs when the animation stops running in a way that does not fire an animationend event, such as a change in the animation-name that removes the animation, or the animating element or one of its ancestors becoming display:none.
- この~eventに対する `elapsedTime$m 値は、~animationの始まりから~animationが取消された時点までの秒数になる。 ただし、~animationが静止していた時間は除外される。 ~animationの `animation-delay$p が負の場合、~animationの始まりは,~animationが実際に誘発された時点から `animation-delay$p の絶対値(秒数)だけ前の時点とする。 対して,遷移の `animation-delay$p が正の場合に,~animationが遅延~段階を終える前に発火された場合、 `elapsedTime$m は 0 になる。 ◎ The elapsedTime member for this event indicates the number of seconds that had elapsed since the beginning of the animation at the moment when the animation was canceled. This excludes any time where the animation was paused. If the animation had a negative animation-delay, the beginning of the animation is the moment equal to the absolute value of animation-delay seconds prior to when the animation was actually triggered. Alternatively, if the animation had a positive animation-delay and the event is fired before the animation’s delay has expired, the elapsedTime will be zero.
-
- 浮上する
- 取消~不可
- 文脈情報: `animationName$m, `elapsedTime$m, `pseudoElement$m
5.3. 要素, `Document^I ~obj, `Window^I ~obj上の~event~handler
以下に挙げる各種`~event~handler$, および 対応する各種`~event~handler~event型$は:
- `~HTML要素$においては、[ `~event~handler内容~属性$, `~event~handler~IDL属性$ ]の両者として,~supportされ~MUST。
- [ `Document$I / `Window$I ]~objにおいては、`~event~handler~IDL属性$として,~supportされ~MUST。
`~event~handler$ | `~event~handler~event型$ |
---|---|
`onanimationstart@m | `animationstart$et |
`onanimationiteration@m | `animationiteration$et |
`onanimationend@m | `animationend$et |
`onanimationcancel@m | `animationcancel$et |
6. DOM ~interface
~CSS~animationは、~keyframeを表現するために新たに導入された~interfaceを通して `CSSOM$r に公開される。 ◎ CSS animations are exposed to the CSSOM through a pair of new interfaces describing the keyframes.
注記: 下に定義される~interfaceは、この仕様の~levelにて可用な相互運用可能な API を反映するものである。 将来~levelでは、この API の一部は,非推奨にされたり,拡張されるかもしれない。 ◎ Note: the interfaces defined below reflect the interoperable API available as of this level of the specification. Future levels may deprecate parts of this API and extend others.
6.1. `CSSRule^I ~interface
次の 2 つの規則 型が `CSSRule@I ~interfaceに追加される。 これらは、新たに導入された `~keyframe規則$, および `keyframes$at 規則 を表現する派生~interfaceの識別を供する。 ◎ The following two rule types are added to the CSSRule interface. They provide identification for the new keyframe and keyframes rules. ◎ 6.1.1. IDL Definition
partial interface `CSSRule$I { const unsigned short `KEYFRAMES_RULE@m = 7; const unsigned short `KEYFRAME_RULE@m = 8; };
【 これらの定数は、順に,派生~interface `CSSKeyframesRule$I, `CSSKeyframeRule$I に対応する。 】
6.2. `CSSKeyframeRule^I ~interface
`CSSKeyframeRule$I ~interfaceは、 1 個の key 【 `~keyframe選択子$ 】 に対応する~style規則を表現する。 ◎ The CSSKeyframeRule interface represents the style rule for a single key. ◎ 6.2.1. IDL Definition
[`Exposed$=Window] interface `CSSKeyframeRule@I : `CSSRule$I { attribute `CSSOMString$ `keyText$m; [`SameObject$, `PutForwards$=`cssText$m] readonly attribute `CSSStyleDeclaration$I `style$m; };
- `keyText@m ◎ keyText, of type CSSOMString
- `~keyframe選択子$を百分率~値からなる~comma区切りの~listとして表現する。 `from^v / `to^v ~keywordは,それぞれ `0%^v / `100%^v に写像される。 ◎ This attribute represents the keyframe selector as a comma-separated list of percentage values. The from and to keywords map to 0% and 100%, respectively.
- `keyText$m が無効な~keyframe選択子に更新されようとした場合、値は変更しないまま, `SyntaxError$E 例外が投出されなければならない。 ◎ If keyText is updated with an invalid keyframe selector, a SyntaxError exception must be thrown and the value of keyText must remain unchanged.
- `style@m ◎ style, of type CSSStyleDeclaration, readonly
- 次のようにされた各種~propを伴う, `CSSStyleDeclaration$I ~objを返さ~MUST ⇒# `読専~flag$ ~SET ~OFF, `宣言$ ~SET `指定された順序$による,規則~内に宣言されている宣言, `親~CSS規則$ ~SET この `CSSKeyframeRule$I ~obj, `所有者~node$ ~SET ~NULL, ◎ Must return a CSSStyleDeclaration object for the keyframe rule, with the following properties: readonly flag • Unset. declarations • The declared declarations in the rule, in specified order. parent CSS rule • The context object (i.e. this CSSKeyframeRule). owner node • Null.
6.3. `CSSKeyframesRule^I ~interface
`CSSKeyframesRule$I ~interfaceは、単独の~animationに対する一連の~keyframeの完全な集合を表現する。 ◎ The CSSKeyframesRule interface represents a complete set of keyframes for a single animation. ◎ 6.3.1. IDL Definition
[`Exposed$=Window] interface `CSSKeyframesRule@I : `CSSRule$I { attribute `CSSOMString$ `name$m; readonly attribute `CSSRuleList$I `cssRules$m; void `appendRule$m(`CSSOMString$ %rule); void `deleteRule$m(`CSSOMString$ %select); `CSSKeyframeRule$I? `findRule$m(`CSSOMString$ %select); };
- `name@m ◎ name, of type CSSOMString
- `animation-name$p ~propにて利用される, `keyframes$at の名前。 【設定-時に与える文字列には、制約はない。】 ◎ This attribute is the name of the keyframes, used by the animation-name property.
- `cssRules@m ◎ cssRules, of type CSSRuleList, readonly
- ~list内の各~keyframeへの~accessを与える。 ◎ This attribute gives access to the keyframes in the list.
- `appendRule( rule )@m ◎ 6.3.3. The appendRule method
-
渡された CSSKeyframeRule を, `keyframes$at 規則の~listの末尾に付加する。
【 “渡された CSSKeyframeRule” — おそらく, %rule 引数を 構文解析- した結果 得られる[ `~keyframe選択子$ ( “key” )と `CSSKeyframeRule$I ]の組を指す。 構文エラーの場合、下記の “例外なし” から,何もしないことになる(例外が投出される `CSSGroupingRule$I の `insertRule()^m ~methodと挙動が異なる)。 】
◎ The appendRule method appends the passed CSSKeyframeRule at the end of the keyframes rule. - 引数 %rule には、付加する規則を与える — `keyframes$at 規則 内の 1 個の~entryと同じ構文で記す。 規則が妥当であれば、~list内に すでに同じ key が存在していたとしても,常に付加される。 ◎ Parameters: rule of type CSSOMString The rule to be appended, expressed in the same syntax as one entry in the @keyframes rule. A valid rule is always appended e.g. even if its key(s) already exists. No Return Value
- 例外なし。 ◎ No Exceptions
- `deleteRule( select )@m ◎ 6.3.4. The deleteRule method
- 指定された~keyframe選択子 %select に合致するような,最後に宣言された `CSSKeyframeRule$I を削除する。 合致する規則が存在しない場合、何もしない。 ◎ The deleteRule method deletes the last declared CSSKeyframeRule matching the specified keyframe selector. If no matching rule exists, the method does nothing.
-
引数 %select には、削除される規則の `~keyframe選択子$からなる~comma区切りの~listを与える:
- 各~keyframe選択子は、 `0%^v 〜 `100%^v の百分率~値, または~keyword `from^v / `to^v (順に 0% / 100% に解決される)。
- [ 値の個数と順序 ]は、対象の `~keyframe規則$たちのそれと合致しなければならない — 値の前後の空白は無視して。
- 例外なし。 ◎ No Exceptions
- `findRule( select )@m ◎ 6.3.5. The findRule method
- 指定された~keyframe選択子 %select に合致するような,最後に宣言された `CSSKeyframeRule$I を返す。 合致する規則が存在しない場合、 null を返す†。 【†原文の記述は明らかに誤記なので修正している。】 ◎ The findRule returns the last declared CSSKeyframeRule matching the specified keyframe selector. If no matching rule exists, the method does nothing.
-
引数 %select には、検索する規則の `~keyframe選択子$からなる~comma区切りの~listを与える:
- 各、~keyframe選択子は `0%^v 〜 `100%^v の百分率~値, または~keyword `from^v / `to^v (順に 0% / 100% に解決される)。
- [ 値の個数と順序 ]は、対象の `~keyframe規則$たちのそれと合致しなければならない — 値の前後の空白は無視して。
- 例外なし。 ◎ No Exceptions
例えば、次の~animationが与えられたとき: ◎ For example, given the following animation:
@keyframes colorful-diagonal-slide { from { left: 0; top: 0; } 10% { background-color: blue; } 10% { background-color: green; } 25%, 75% { background-color: red; } 100% { left: 100px; top: 100px; } }
変数 %anim は、この~animationに対する `CSSKeyframesRule$I ~objへの参照を保持しているとする。 次のコードは: ◎ Assuming the variable anim holds a reference to a CSSKeyframesRule object for this animation, then:
%anim.deleteRule('10%'); var %tenPercent = %anim.findRule('10%');
最後の 10% 規則( background-color: green )を削除してから、残る規則 background-color: blue を見出して,それを %tenPercent に返す。 ◎ will start by deleting the last 10% rule i.e. the green background color rule; then find the remaining blue background rule and return it into tenPercent.
次のコードは: ◎ The following:
var %red = %anim.findRule('75%');
%red を ~NULL に設定する。 代わりに,規則 background-color: red に対する全部的な選択子が利用されなければならない: ◎ will set red to null. The full selector for the red background color rule must be used instead:
var %red = %anim.findRule('25%,75%');
`from^v は 0% に, `to^v は 100% に写像されるので、次では,どちらの値を利用しても規則を見出せる: ◎ Since from maps to 0% and to maps to 100%, we can find these rules using either value:
var %from = %anim.findRule('0%'); /* from { left: 0; top: 0; } 規則を返す */ var %to = %anim.findRule('to'); /* 100% { left: 100px; top: 100px; } 規則を返す */
6.4. `GlobalEventHandlers^I ~interfaceに対する拡張
この仕様は、[ 要素, `Document^I ~obj, `Window^I ~obj上の~event~handler ]節に定義される各種 ~animation~event 用の`~event~handler~IDL属性$を追加するために、 ~HTMLの `GlobalEventHandlers$I ~interfaceを拡張する: ◎ This specification extends the GlobalEventHandlers interface from HTML to add event handler IDL attributes for animation events as defined in §5.3 Event handlers on elements, Document objects, and Window objects. ◎ 6.4.1. IDL Definition
partial interface mixin `GlobalEventHandlers$I { attribute `EventHandler$I `onanimationstart$m; attribute `EventHandler$I `onanimationiteration$m; attribute `EventHandler$I `onanimationend$m; attribute `EventHandler$I `onanimationcancel$m; };
7. ~privacy/~security上の考慮点
この仕様により導入される ~privacy/~security 上の考慮点は無い。 ◎ This specification introduces no new privacy or security considerations.
8. 謝辞
とりわけ、次の方々からのフィードバックに。 加えて、 www-style コミュニティのすべての方々に。
Thanks especially to the feedback from Tab Atkins, Brian Birtles, Shane Stephens, Carine Bournez, Christian Budde, Anne van Kesteren, Øyvind Stenhaug, Estelle Weyl, and all the rest of the www-style community.
9. 他の open 課題
~keyframe間の相互作用を指定する 必要がある。 ◎ Need to specify how keyframes interact.