W3C

CSS アニメーション — CSS Animations Level 1

2016 年 8 月 3 日付 編集者草案

このバージョン
https://drafts.csswg.org/css-animations/
最新発行バージョン
https://www.w3.org/TR/css3-animations/
以前のバージョン
https://www.w3.org/TR/2013/WD-css3-animations-20130219/
https://www.w3.org/TR/2012/WD-css3-animations-20120403/
テスト一式
http://test.csswg.org/suites/css-animations-1_dev/nightly-unstable/
最新の課題
仕様内
GitHub Issues
編集
Dean Jackson (Apple Inc.)
L. David Baron (Mozilla)
Tab Atkins Jr. (Google)
Brian Birtles (Mozilla Japan)
前任編集者
David Hyatt (Apple Inc.)
Chris Marrin (Apple Inc.)
Sylvain Galineau (Adobe)
課題一覧
In Bugzilla
Copyright © 2016 W3C® (MIT, ERCIM, Keio, Beihang). W3C liability, trademark and document use rules apply.

要約

この~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.

CSS は、( HTML や XML などの)構造を備える文書から, スクリーン, 紙, スピーチ, 等々 の媒体への具現化法を記述するための言語である。 ◎ CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc.

この文書の位置付け

これは編集者草案の公開の複製です… 【 以下,この節の他の内容は CSS 日本語訳 共通ページ に委譲 】

次の特色機能は リスク下 にあり, CR 期間内に取り下げられる可能性があります: ◎ The following features are at-risk, and may be dropped during the CR period:

1. 序論

~INFORMATIVE

CSS 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を反復させる回数, 始値と終値を`交替$( `alternate$v )させるかどうか, ~animationを稼働中( `running$v )に置くか休止( `paused$v )させるか, を含め,~animationの多くの側面を制御できる。 また、~animationの実際の開始-時機を`遅延$( `animation-delay$p )させることもできる。 ◎ Many aspects of the animation can be controlled, including how many times the animation iterates, whether or not it alternates between the begin and end values, and whether or not the animation should be running or paused. An animation can also delay its start time.

2. 値

【 この節の内容は CSS 日本語訳 共通ページ に委譲 】

3. ~animation

CSS Animations は、~propの`算出値$に影響する。 この効果は、( CSS Animations に適応する Level の)~CSS~cascade( `CSS3CASCADE$r )において,[ `~animation~level$の`指定値$ ]を追加して,[ ~animationの現在の状態を与える, “正しい” `算出値$ ]を生産することにより、生じる。 `CSS3CASCADE$r にて定義される様に、~animationは, ~important規則により上書きされるものを除く,通常の規則すべてを上書きする。 ◎ 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( `CSS3CASCADE$r )に従って,他の値がその~animateされた値より優先されることもある。 ◎ 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 規則が未だ存在しない場合,開始されることはない — 合致する `keyframes$at 規則を解決し得るようになり次第,始めから開始することになる。 要素の~styleに対する動的な改変により指定される~animationは、その~styleが解決されたときに開始されることになる — それは、即時( hover などの疑似~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は,~animationの[ 新たな~list内での位置 ]に対応する各種~animation~propを利用して更新される — ただし,上に述べたそれの現在の再生時間は維持する。 合致した~animationは、重ねて合致することの無いよう,既存の~animation~listから除去される。 合致するものが見出されなかった場合、新たな~animationが作成される。 その結果、例えば `animation-name$p を "`a^v" から "`a, a^v" に更新した場合、 `a^v に対する既存の~animationは~list内の二番目の~animationになり,~list内の最初の項に対し新たな~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-play-state$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-play-state 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には、その導入部における[ `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 は無視される。 注記: 百分率~値には,百分率 単位~指定子( "`%^css" )が利用されなければならない — `0^v は、`~keyframe選択子$としては妥当でない。 ◎ 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. Note that the percentage unit specifier must be used on percentage values. Therefore, 0 is an invalid keyframe selector.

【† すなわち、~animationの 1 周回の中の いくつかの時点を(その所要時間に対する割合により) “選択する” 。 】【 2 つの`選択子の値$が(抽象的な数として)非常に近い場合(例えば "0%" と "0.00000001%" など)、実装の数値精度に依存して,同じ値に見なされるかもしれない(どの程度の精度まで確保されるかについては、(現時点では) `CSS3VAL$r の中では言及されていない)。 】

[ `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法と整合させるために,単に “無視される” ことにしているものと考えられる。 】
◎ The <keyframe-block> contains properties and values. The properties defined by this specification are ignored in these rules, with the exception of animation-timing-function, the behavior of which is described below. In addition, properties qualified with !important are invalid and ignored.

【 `~keyframe選択子$ / `選択子の値$ / `~keyframe~style規則$ は、原文では用語として定義されていないが,他所に現れるこれらの語や記述の意味を明確化するため、この訳では,用語として与えている。 】

複数の `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を決定するためには、まず,それらが`選択子の値$により `時系列順@(昇順)に整列された上で, `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.

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

0 秒後
2 秒後
4 秒後
6 秒後
8 秒後
10 秒後
~keyframeにより指定される~animation状態 ◎ Animation states specified by keyframes

【 上の~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に対する~timing関数

それぞれの `~keyframe~style規則$では、~animationが次の~keyframeへ移行するときに利用される`~timing関数$を宣言できる。 ◎ 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が指定されている。 最初と2番目の~keyframeの合間(すなわち, 0% 〜 25% )には, `ease-out$v `~timing関数$が利用され、 2番目と3番目の~keyframeの合間(すなわち, 25% 〜 50% )には, `ease-in$v `~timing関数$が利用される,等々。 その効果は、次の様に現れることになる: 要素は頁の上方へ `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上に指定されている`~timing関数$は,無視される。 ◎ 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の上書きに利用できる。 同じ~propに対し,複数の~animationが改変しようと試みている場合、名前が~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$にあてがわれた値の~listは,~animationの開始-時に `animation-name$p による~listと同じ長さに揃えられる様に,最初の値から対応付けられる: 末尾側の超過部分に位置する値は利用されない。 他の~propに `animation-name$p による値の~listに対応する個数に足る~comma区切りの値があてがわれていない場合、 ~UAは,その~propにあてがわれた値~listを,十分な値の個数が得られるまで繰返す【†】 ことにより、その`使用値$を算定しなければならない。 この切り捨て/繰返しは、`算出値$には影響しない。 ◎ Each animation listed by name should have a corresponding value for the other animation properties listed below. If the lists of values for the other animation properties do not have the same length, the length of the animation-name list determines the number of items in each list examined when starting animations. The lists are matched up from the first value: excess values at the end are not used. If one of the other properties doesn’t have enough comma-separated values to match the number of values of animation-name, the UA must calculate its used value by repeating the list of values until there are enough. This truncation or repetition does not affect the computed value.

【† 値が 0 個の場合(全くあてがわれていない場合)、~cascade処理の結果,初期値が利用されることになる(これらの~propはどれも継承しないので)。 】

注記: これは、 `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 `●継^ されない `●百^ 利用不可 `●媒^ 対話的 `●算^ 指定値 `●順^ 文法に従う `●ア^ 不可 `●表終^

`animation-name$p の `single-animation-name$t がとり得る各種 値の意味は,次で与えられる: ◎ 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
`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は、発火される: `animation-direction$p の定義により、 `animation-fill-mode$p 値が `backwards$v / `both$v であれば, `animation-delay$p の間に,~animationの最初の~frameが表示され、しかる後, `animation-fill-mode$p 値が `forwards$v / `both$v であれば, ~animationの最後の~frameが表示されることになる。 `animation-fill-mode$p 値が none の場合、~animationは視覚的 効果を持たない。 ◎ If the <time> is 0s, like the initial value, the keyframes of the animation have no effect, but the animation itself still occurs instantaneously. Specifically, start and end events are fired; 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. Then the last frame of the animation, as defined by animation-direction, will be displayed if animation-fill-mode is set to forwards or both. If animation-fill-mode is set to none then the animation has no visible effect.

4.4. `animation-timing-function^p ~prop

`animation-timing-function$p ~propは、[ ~animationが、その`所要時間$の 1 周回において,どのように進捗するか ]を記述する, `~timing関数@ を指定する。 ~timing関数による計算についての完全な記述は、 `transition-timing-function$p ~prop `CSS3-TRANSITIONS$r を参照のこと。 ◎ The animation-timing-function property describes how the animation will progress over one cycle of its duration. See the transition-timing-function property [CSS3-TRANSITIONS] for a complete description of timing function calculation.

`●名^ `animation-timing-function@p `●値^ `single-timing-function$t# `●初^ `ease^v `●適^ すべての要素, および `before$pe, `after$pe 疑似要素 ◎ all elements, ::before and ::after pseudo-elements `●継^ されない `●百^ 利用不可 `●媒^ 対話的 `●算^ 指定値 `●順^ 文法に従う `●ア^ 不可 `●表終^

`single-timing-function@t の値とその意味は、 `single-transition-timing-function$t `CSS3-TRANSITIONS$r のそれと同じになる。 ◎ The values and meaning of <single-timing-function> are identical to those of <single-transition-timing-function> [CSS3-TRANSITIONS].

指定された~timing関数は、~animation全体でなく,その各~反復ごとに適用される。

例えば、 `animation-timing-function$p: `ease-in-out$v; `animation-iteration-count$p: `2^v; で与えられる~animationは:

  1. その開始-から徐々に動きを速め( “ease in” )、
  2. 1 回目の反復の終止-(次の~keyframeが始まる前)に近付くに連れ,徐々に動きを~~緩め( “ease out” )、
  3. 2 回目の反復の開始-から また徐々に動きを速め、
  4. その終止-に近付くに連れ また徐々に動きを~~緩めることになる。
◎ The timing function specified applies to each iteration of the animation, not the entire animation in full. For example, if an animation has animation-timing-function: ease-in-out; animation-iteration-count: 2;, it will ease in at the start, ease out as it approaches the end of its first iteration, ease in at the start of its second iteration, and ease out again as it approaches the end of the animation.

~keyframe内【†1】 に指定された `animation-timing-function$p は、その~keyframeから【†2】 `時系列順$で次の[ `animation-timing-function$p を定義するような~keyframe ], もしくは `100%^v ~keyframe(暗黙的なそれも含む)までの,~animationの進展を定義する。 指定された~timing関数は、~animationの現在の方向には関係なく,この時区間に適用される【†3】 。 ◎ 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). The specified timing function will apply over this interval independently of the animation’s current direction.

【†1 すなわち, `keyframe-block$t 内 】【†2 すなわち,その~keyframe`選択子の値$による時点 】【†3 すなわち,逆方向に再生されるときでも、[ `時系列順$で前の~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 `●継^ されない `●百^ 利用不可 `●媒^ 対話的 `●算^ 指定値 `●順^ 文法に従う `●ア^ 不可 `●表終^
`single-animation-iteration-count@t = `infinite$v | `number$t
`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が逆再生されるときは`~timing関数$も逆にされる。 例えば,逆再生されたときの `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 `●継^ されない `●百^ 利用不可 `●媒^ 対話的 `●算^ 指定値 `●順^ 文法に従う `●ア^ 不可 `●表終^
`single-animation-direction@t = `normal$v | `reverse$v | `alternate$v | `alternate-reverse$v
`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 `●継^ されない `●百^ 利用不可 `●媒^ 対話的 `●算^ 指定値 `●順^ 文法に従う `●ア^ 不可 `●表終^
`single-animation-play-state@t = `running$v | `paused$v
`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.

【 ~script利用下でなくとも,例えば :hover 疑似クラスと組み合せて、~animationを文書の読み込み( load )時に休止の状態に置きつつ,実際の開始-/休止を~mouse位置に応じて行わせるような利用が考えられる。 】

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.
`●名^ `animation-fill-mode@p `●値^ `single-animation-fill-mode$t# `●初^ `none^v `●適^ すべての要素, および `before$pe, `after$pe 疑似要素 ◎ all elements, ::before and ::after pseudo-elements `●継^ されない `●百^ 利用不可 `●媒^ 対話的 `●算^ 指定値 `●順^ 文法に従う `●ア^ 不可 `●表終^
`single-animation-fill-mode@t = none | `forwards$v | `backwards$v | `both$v
`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 がゼロの場合、最初の反復の開始-時の値が適用されることになる( `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値を適用することになる。 これは、 `animation-direction$p 値に応じて,次のいずれかになる:

`normal$v
`alternate$v
`from^v ~keyframe。
`reverse$v
`alternate-reverse$v
`to^v ~keyframe。
◎ During the period defined by animation-delay, the animation will apply the property values defined in the keyframe that will start the first iteration of the animation. These are either the values of the from keyframe (when animation-direction is normal or alternate) or those of the to keyframe (when animation-direction is reverse or alternate-reverse).
`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は、(略式~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 || `single-timing-function$t || `time$t || `single-animation-iteration-count$t || `single-animation-direction$t || `single-animation-fill-mode$t || `single-animation-play-state$t || `single-animation-name$t

各~animation定義の中の順序は重要であることに注意: 各 `single-animation$t 内において、 `time$t に構文解析し得る値のうち,最初の値が `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定義の中での順序は、 `single-animation-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 <single-animation-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 の)名前が[ 複数個あるとき ]や, [ その単独の名前の `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.

[Constructor(DOMString %type, optional `AnimationEventInit$I %animationEventInitDict)]
interface `AnimationEvent@I : `Event$I {
  readonly attribute DOMString `animationName$m;
  readonly attribute float `elapsedTime$m;
  readonly attribute DOMString `pseudoElement$m;
};
dictionary `AnimationEventInit@I : `EventInit$I {
  DOMString `animationName@dm = "";
  float `elapsedTime@dm = 0.0;
  DOMString `pseudoElement@dm = "";
};
readonly DOMString `animationName@m
~eventを発火した~animationの `animation-name$p ~propの値。 ◎ The value of the animation-name property of the animation that fired the event.
readonly float `elapsedTime@m
この~eventが発火された時点における,~animationの経過時間(秒)。 ~animationが休止されていた時間は除外される。 `animationstart$et ~eventにおける `elapsedTime$m は、 `animation-delay$p が負値でなければ ゼロになり,負値であれば その絶対値( −1 × delay )になる。 ◎ The amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an animationstart event, the elapsedTime is zero unless there was a negative value for animation-delay, in which case the event will be fired with an elapsedTime of (-1 * delay).
readonly DOMString `pseudoElement@m
~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^m(%type, %animationEventInitDict)
これは、`~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は,それによる遅延期間が満了したときに発火することになる。 負の遅延に対しては、遅延の絶対値に等しい `elapsedTime$m が伴われた~eventが発火されることになる — `animation-play-state$p が `running$v / `paused$v のいずれに設定されていても,発火される。 ◎ 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. A negative delay will cause the event to fire with an elapsedTime equal to the absolute value of the delay; in this case the event will fire whether animation-play-state is set to running or paused.

  • 浮上する ◎ Bubbles: Yes
  • 取消不可 ◎ Cancelable: No
  • 文脈情報: `animationName$m, `pseudoElement$m ◎ Context Info: animationName, pseudoElement
`animationend@et

`animationend$et ~eventは、~animationの終了時に生じる。 ◎ The animationend event occurs when the animation finishes.

  • 浮上する ◎ Bubbles: Yes
  • 取消不可 ◎ Cancelable: No
  • 文脈情報: `animationName$m, `elapsedTime$m, `pseudoElement$m ◎ Context Info: animationName, elapsedTime, pseudoElement
`animationiteration@et

`animationiteration$et ~eventは、 `animationend$et ~eventが同時に発火されることになる場合を除く,~animationの各 反復の終端~時に生じる。 したがって,この~eventは、`反復回数$が 1 以下の~animationにおいては,生じないことになる。 【 また、`所要時間$が 0s の場合も,`反復回数$に関わらず生じないことになる。 】 ◎ 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.

  • 浮上する ◎ Bubbles: Yes
  • 取消不可 ◎ Cancelable: No
  • 文脈情報: `animationName$m, `elapsedTime$m, `pseudoElement$m ◎ Context Info: animationName, elapsedTime, pseudoElement

5.2.1. 要素, `Document^I ~obj, `Window^I ~obj上の~event~handler

次に挙げる`~event~handler$(および それらに対応する 各種`~event~handler~event型$)は、[ `~event~handler内容~属性$, `~event~handler IDL 属性$ ]の両者として,すべての `HTML 要素$により~supportされ~MUST。 また、すべての[ `Document$I / `Window$I ]~objにより,`~event~handler IDL 属性$として~supportされ~MUST: ◎ The following are the event handlers (and their corresponding event handler event types) that must be supported by all HTML elements, as both event handler content attributes and event handler IDL attributes; and that must be supported by all Document and Window objects, as event handler IDL attributes:

`~event~handler$ `~event~handler~event型$
`onanimationstart@m `animationstart@et
`onanimationiteration@m `animationiteration@et
`onanimationend@m `animationend@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.

partial interface `CSSRule$I {
  const unsigned short `KEYFRAMES_RULE@I = 7;
  const unsigned short `KEYFRAME_RULE@I = 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.

interface `CSSKeyframeRule@I : `CSSRule$I {
           attribute DOMString           `keyText$m;
  readonly attribute `CSSStyleDeclaration$I `style$m;
};
DOMString `keyText@m
`~keyframe選択子$を百分率~値からなる~comma区切りの~listとして表現する。 `from^v / `to^v ~keywordは,それぞれ `0%^v / `100%^v に写像される。 ◎ keyText, of type DOMString ◎ 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$c 例外が投出されなければならない。 ◎ If keyText is updated with an invalid keyframe selector, a SyntaxError exception must be thrown.
readonly `CSSStyleDeclaration$I `style@m
この~keyframeに結付けられている~styleを表現する。 ◎ This attribute represents the style associated with this keyframe.

6.3. `CSSKeyframesRule^I ~interface

`CSSKeyframesRule$I ~interfaceは、単独の~animationに対する一連の~keyframeの完全な集合を表現する。 ◎ The CSSKeyframesRule interface represents a complete set of keyframes for a single animation.

interface `CSSKeyframesRule@I : `CSSRule$I {
           attribute DOMString   `name$m;
  readonly attribute `CSSRuleList$I `cssRules$m;

  void            `appendRule$m(DOMString %rule);
  void            `deleteRule$m(DOMString %select);
  `CSSKeyframeRule$I? `findRule$m(DOMString %select);
};

【 `CSSRule$I を継承しているが,(その派生クラスの) `CSSGroupingRule$I を継承すべき所? 】

DOMString `name@m
`animation-name$p ~propにて利用される, `keyframes$at の名前を返す。 ◎ name, of type DOMString ◎ This attribute is the name of the keyframes, used by the animation-name property.
`~CSS全域~keyword$ や, `animation-name$p にて定義される~keywordに合致する値に設定しようとした場合、 `SyntaxError$c 例外が投出される。 ◎ Setting this property to a value matching a CSS-wide keyword or any keyword defined for the animation-name property will throw a SyntaxError exception.
readonly `CSSRuleList$I `cssRules@m
~list内の各~keyframeへの~accessを与える。 ◎ cssRules, of type CSSRuleList ◎ This attribute gives access to the keyframes in the list.
void `appendRule@m( %rule )

渡された CSSKeyframeRule を, `keyframes$at 規則の~listの末尾に付加する。

【 “渡された CSSKeyframeRule” — おそらく, %rule 引数を 構文解析- した結果 得られる[ `~keyframe選択子$ ( “key” )と `CSSKeyframeRule$I ]の組を指す。 構文エラーの場合、下記の “例外なし” から,何もしないことになる(例外が投出される `CSSGroupingRule$I の `insertRule()^m ~methodと挙動が異なる)。 】

引数 %rule に、付加する規則を与える — `keyframes$at 規則 内の 1 個の~entryと同じ構文で記す。 規則が妥当であれば、~list内に すでに同じ key が存在していたとしても,常に付加される。

例外なし。

The appendRule() method appends the passed CSSKeyframeRule at the end of the keyframes rule.

Parameters:

rule of type DOMString
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

void `deleteRule@m( %select )

指定された~keyframe選択子 %select に合致するような,最後に宣言された `CSSKeyframeRule$I を削除する。 合致する規則が存在しない場合、何もしない。

引数 %select には、削除される規則の `~keyframe選択子$からなる~comma区切りの~listを与える:

  • 各~keyframe選択子は、 `0%^v 〜 `100%^v の百分率~値, または~keyword `from^v / `to^v (順に 0% / 100% に解決される)。
  • [ 値の個数と順序 ]は、対象の `~keyframe規則$たちのそれと合致しなければならない — 値の前後の空白は無視して。

例外なし。

The deleteRule() method deletes the last declared CSSKeyframeRule matching the specified keyframe selector. If no matching rule exists, the method does nothing.

Parameters:

select of type DOMString
The keyframe selector of the rule to be deleted: a comma-separated list of percentage values between 0% and 100% or the keywords from or to which resolve to 0% and 100%, respectively.
The number and order of the values in the specified keyframe selector must match those of the targeted keyframe rule(s). The match is not sensitive to white space around the values in the list.

No Return Value

No Exceptions

`CSSKeyframeRule$I? `findRule@m( %select )

指定された~keyframe選択子 %select に合致するような,最後に宣言された `CSSKeyframeRule$I を返す。 合致する規則が存在しない場合、 null を返す†。

【† 原文の記述は明らかに誤記なので修正。 】

引数 %select には、検索する規則の `~keyframe選択子$からなる~comma区切りの~listを与える:

  • 各、~keyframe選択子は `0%^v 〜 `100%^v の百分率~値, または~keyword `from^v / `to^v (順に 0% / 100% に解決される)。
  • [ 値の個数と順序 ]は、対象の `~keyframe規則$たちのそれと合致しなければならない — 値の前後の空白は無視して。

例外なし。

The findRule() returns the last declared CSSKeyframeRule matching the specified keyframe selector. If no matching rule exists, the method does nothing.

Parameters:

select of type DOMString
The keyframe selector of the rule to be deleted: a comma-separated list of percentage values between 0% and 100% or the keywords from or to which resolve to 0% and 100%, respectively.
The number and order of the values in the specified keyframe selector must match those of the targeted keyframe rule(s). The match is not sensitive to white space around the values in the list.

Return Value:

CSSKeyframeRule
The found rule.

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.2.1 Event handlers on elements, Document objects, and Window objects.

6.4.1. IDL 定義

partial interface `GlobalEventHandlers$I {
  attribute `EventHandler$I `onanimationstart$m;
  attribute `EventHandler$I `onanimationiteration$m;
  attribute `EventHandler$I `onanimationend$m;
};

7. 謝辞

とりわけ、次の方々からのフィードバックに。 加えて、 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.

8. 他の open 課題

~keyframe間の相互作用を指定する 必要がある。 ◎ Need to specify how keyframes interact.

9. まだ編集を要する Working Group による解決

この節は一時的な参考である。 ◎ This section is informative and temporary.

この仕様は,まだ編集の段階にある。 以下に挙げる Working Group による解決は、まだ編集を要する: ◎ The editors are currently behind on editing this spec. The following working group resolutions still need to be edited in:

適合性

【 この節の内容は CSS 日本語訳 共通ページ に委譲 】

参照文献

文献(規範)

[CSS-BACKGROUNDS-3]
CSS Backgrounds and Borders Module Level 3
https://drafts.csswg.org/css-backgrounds-3/
[CSS-CASCADE-4]
Elika Etemad; Tab Atkins Jr.. CSS Cascading and Inheritance Level 4. 14 January 2016. CR.
http://dev.w3.org/csswg/css-cascade/
[CSS-DISPLAY-3]
Tab Atkins Jr.; Elika Etemad. CSS Display Module Level 3. 15 October 2015. WD.
http://dev.w3.org/csswg/css-display/
[CSS-SYNTAX-3]
Tab Atkins Jr.; Simon Sapin. CSS Syntax Module Level 3. 20 February 2014. CR.
http://dev.w3.org/csswg/css-syntax/
[CSS-TRANSITIONS-1]
CSS Transitions Module Level 1
https://drafts.csswg.org/css-transitions-1/
[CSS-WILL-CHANGE-1]
Tab Atkins Jr.. CSS Will Change Module Level 1. 3 December 2015. CR.
http://dev.w3.org/csswg/css-will-change/
[CSS21]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. REC.
https://www.w3.org/TR/CSS2
[CSS3-TRANSITIONS]
Dean Jackson; et al. CSS Transitions. 19 November 2013. WD.
http://dev.w3.org/csswg/css-transitions/
[CSS3CASCADE]
Elika Etemad; Tab Atkins Jr.. CSS Cascading and Inheritance Level 3. 19 May 2016. CR.
https://drafts.csswg.org/css-cascade-3/
[CSS3VAL]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. 11 June 2015. CR.
http://dev.w3.org/csswg/css-values/
[CSSOM-1]
Simon Pieters; Glenn Adams. CSS Object Model (CSSOM). 17 March 2016. WD.
https://drafts.csswg.org/cssom/
[HTML]
Ian Hickson. HTML Standard. Living Standard.
https://html.spec.whatwg.org/multipage/
[WCAG20]
Ben Caldwell; et al. Web Content Accessibility Guidelines (WCAG) 2.0. 11 December 2008. REC.
https://www.w3.org/TR/WCAG20/
[WebIDL-1]
Cameron McCormack; Boris Zbarsky. WebIDL Level 1. 8 March 2016. CR.
https://heycam.github.io/webidl/
[WHATWG-DOM]
Anne van Kesteren. DOM Standard. Living Standard.
https://dom.spec.whatwg.org/

文献(参考)

[CSS-POSITION-3]
Rossen Atanassov; Arron Eicholz. CSS Positioned Layout Module Level 3. 17 May 2016. WD.
https://drafts.csswg.org/css-position/

索引

【 この節の内容は省略(ウィンドウ下端の索引機能を利用されたし)。 】

プロパティ索引

IDL 索引

課題索引

【 これらの節の内容は省略(見出しクリックで巡回)。 】