1. 序論
~INFORMATIVEこの文書は、暗黙的な遷移 を可能化する，新たな~CSS特色機能を導入する。 それは、与えられた時間をかけて~CSS~propをある値から別の値へ滑らかに変化させる方法を記述する。 ◎ This document introduces new CSS features to enable implicit transitions, which describe how CSS properties can be made to change smoothly from one value to another over a given duration.
【 暗黙的（ implicit ）な遷移 — ~propの値を能動的／明示的（ explicit ）に変化させる~animationとは対照的に，下層の~prop値の変化に応じて受動的（自動的）に遷移させる（変化過程を時間的に引き延ばして呈示させる）効果。 】
2. 遷移効果
通常は、~CSS~propの値が変化するとき、影響される要素の~propは古い値から新たな値へ即時に変化し，結果の描画は瞬時に更新される。 この節では、新たな~CSS~propを利用して遷移を指定する方法を述べる。 これらの~propは、古い状態から新たな状態へ時間をかけて滑らかに~animateさせるために利用される。 ◎ Normally when the value of a CSS property changes, the rendered result is instantly updated, with the affected elements immediately changing from the old property value to the new property value. This section describes a way to specify transitions using new CSS properties. These properties are used to animate smoothly from the old state to the new state over time.
例えば、［ `left$p, `background-color$p ］~propに対し 1 秒間の遷移が定義されたとする。 次の図式に，要素~上のそれらの~propが更新されるときの効果を示す — ここでは、要素は右へ移動し, 背景は赤色から青色に変化するとする。 他の遷移~parameterについては，既定の値のままにされるとする。 ◎ For example, suppose that transitions of one second have been defined on the left and background-color properties. The following diagram illustrates the effect of updating those properties on an element, in this case moving it to the right and changing the background from red to blue. This assumes other transition parameters still have their default values.
遷移は呈示上の効果である。 ~propの`算出値$は、 【`指定値$の変化に応じて】 古い値から新たな値へ時間をかけて遷移する。 したがって、遷移-中における~propに対し，~scriptから`算出値$（または，それに依存する他の~data）が照会されたときは、~animateされている~propの現在の値を表現する，中途の値が得られることになる。 ◎ Transitions are a presentational effect. The computed value of a property transitions over time from the old value to the new value. Therefore if a script queries the computed value of a property (or other data depending on it) as it is transitioning, it will see an intermediate value that represents the current animated value of the property.
遷移-可能な~CSS~propは、~animatableなものに限られる。 この文書の末尾に，~animatableな~propの一覧が挙げられている。 ◎ Only animatable CSS properties can be transitioned. See the table at the end of this document for a list of properties that are animatable.
~propの遷移は、いくつかの新たな~propを利用して定義される。 例えば： ◎ The transition for a property is defined using a number of new properties. For example:
div {
transition-property: opacity;
transition-duration: 2s;
}
上の例は、 `opacity$p ~propに新たな値があてがわれたとき，古い値から新たな値へ, 2 秒かけて滑らかに変化するような、遷移を定義する。 ◎ The above example defines a transition on the opacity property that, when a new value is assigned to it, will cause a smooth change between the old value and the new value over a period of two seconds.
各種 遷移~propには、~comma区切りの~listも受容される。 これにより、それぞれが異なる~propに作用するような複数の遷移を，一括して定義できるようになる。 この場合、個々の遷移の~parameterたちは、これらの~listの，同じ~indexに位置する所からとられる。 例えば： ◎ Each of the transition properties accepts a comma-separated list, allowing multiple transitions to be defined, each acting on a different property. In this case, the individual transitions take their parameters from the same index in all the lists. For example:
div {
transition-property: opacity, left;
transition-duration: 2s, 4s;
}
は、［ `opacity$p, `left$p ］~propを，それぞれ［ 2 秒, 4 秒 ］かけて遷移させることになる。 ◎ This will cause the opacity property to transition over a period of two seconds and the left property to transition over a period of four seconds.
一連の遷移~propに与えられた値の個数が不揃いの場合、 `transition-property$p の値の個数（ %n とする）が，遷移の開始-時における 他の遷移~propの値の個数を決定する。 それぞれの値~listは先頭の値から互いに関連付けられ、 %n を超える部分の値は利用されない。 値の個数が %n に満たない遷移~propに対しては、 UA は，その~propに与えられた値~listを，値の個数が十分になるまで繰返すことにより、その`使用値$を算定し~MUST。 この切捨て／繰返は、`算出値$には影響しない。 注記： これは `background-*^p ~propの挙動に類似する（ `background-image$p が `transition-property$p の役割に類似する）。 【参照】 ◎ In the case where the lists of values in transition properties do not have the same length, the length of the transition-property list determines the number of items in each list examined when starting transitions. 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 transition-property, 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. Note: This is analogous to the behavior of the background-* properties, with background-image analogous to transition-property.
div {
transition-property: opacity, left, top, width;
transition-duration: 2s, 1s;
}
上の例は，［ `opacity$p／ `left$p ／ `top$p ／ `width$p ］~prop上にそれぞれ所要時間［ 2 秒 ／ 1 秒 ／ 2 秒 ／ 1 秒 ］の遷移を定義する。 ◎ The above example defines a transition on the opacity property of 2 seconds duration, a transition on the left property of 1 second duration, a transition on the top property of 2 seconds duration and a transition on the width property of 1 second duration.
遷移は 内容を動的に変化させるものであり，一部の利用者には光過敏性発作（ seizure ）をもたらす可能性がある。 光過敏性発作をもたらし得る内容を避ける方法については 指針 2.3 : 光過敏性発作を引き起こさないように内容を設計すること (`WCAG20$r) を見よ。 ◎ While authors can use transitions 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]).
2.1. `transition-property^p ~prop
`transition-property$p ~propは、遷移が適用される~CSS~propの名前を指定する。 ◎ The transition-property property specifies the name of the CSS property to which the transition is applied.
◎名 `transition-property@p ◎値 `none$v | `single-transition-property$t # ◎初 `all$v ◎適 すべての要素, および `before$pe, `after$pe 疑似要素 ◎継 されない ◎百 受容しない ◎算 `指定値$と同じ ◎ア ~animate不可 ◎順 文法に従う ◎表終値 `none@v は、 【宣言が適用される［要素／疑似要素］上の】 どの~propも遷移されないことを意味する。 他の場合、 1 個以上の［ 遷移~対象になる~prop名, または ~keyword `all$v ］からなる~listを値にとる。 `all@v は、すべての~propを遷移~対象にすることを指示する。 ◎ A value of none means that no property will transition. Otherwise, a list of properties to be transitioned, or the keyword all which indicates that all properties are to be transitioned, is given.
~listされた識別子の中に，認識されない~prop名や~animatableでない~propである場合でも、実装は、~list内の他の~animatableな~propについては，［［ `transition-duration$p ／ `transition-delay$p ／ `transition-timing-function$p ］~propが与える~listの，対応する~indexに位置する［ `所要時間$／`遅延$／`計時~関数$ ］］を利用して，遷移を開始させ~MUST。 言い換えれば、［ 認識されない／~animatableでない ］~propも，~listどうしの~index対応を保全するため，保たれ~MUST。 ◎ If one of the identifiers listed is not a recognized property name or is not an animatable property, the implementation must still start transitions on the animatable properties in the list using the duration, delay, and timing function at their respective indices in the lists for transition-duration, transition-delay, and transition-timing-function. In other words, unrecognized or non-animatable properties must be kept in the list to preserve the matching of indices.
`single-transition-property$t 内の `custom-ident$t 生成規則では、 `custom-ident$t から常に除外される~keywordに加えて，~keyword `none$v も除外される。 すなわち，~keyword `none$v, `inherit$v, `initial$v は、複数個の識別子からなる~listの中では，許可されない。 ◎ The <custom-ident> production in <single-transition-property> also excludes the keyword none, in addition to the keywords always excluded from <custom-ident>. This means that none, inherit, and initial are not permitted as items within a list of more that one identifier; any list that uses them is syntactically invalid.
~keyword `all$v に対しては、~animatableなすべての~propが遷移の対象になる。 `略式~prop$の識別子に対しては、その`下位prop$すべてが遷移の対象になる。 すなわち実装は、それらの~propに対し，その~itemに対応する~indexに位置する［ `所要時間$, `遅延$, `計時~関数$ ］を利用して 遷移を開始させ~MUST。 ◎ For the keyword all, or if one of the identifiers listed is a shorthand property, implementations must start transitions for any of its longhand sub-properties that are animatable (or, for all, all animatable properties), using the duration, delay, and timing function at the index corresponding to the shorthand.
`transition-property$p の値の中に，同じ~propが複数回 指定された場合（［ それを下位propに持つ略式~propや `all$v ］を通して指定されるものも含め）、それらのうち最後の~itemのみが有効になる。 ◎ If a property is specified multiple times in the value of transition-property (either on its own, via a shorthand that contains it, or via the all value), then the transition that starts uses the duration, delay, and timing function at the index corresponding to the last item in the value of transition-property that calls for animating that property.
注記： 値 `all$v は、すべての~propを対象にする略式~prop `all$p と，ちょうど類似するように働く。 ◎ Note: The all value and all shorthand property work in similar ways, so the all value is just like a shorthand that covers all properties.
2.2. `transition-duration^p ~prop
`transition-duration$p ~propは、 `所要時間@ — 遷移にかかる時間の長さ — を定義する。 ◎ The transition-duration property defines the length of time that a transition takes.
◎名 `transition-duration@p ◎値 `time$t # ◎初 `0s^v ◎適 すべての要素, および `before$pe, `after$pe 疑似要素 ◎継 されない ◎百 受容しない ◎算 `指定値$と同じ ◎順 文法に従う ◎ア ~animate不可 ◎表終この~propは、古い値から新たな値への遷移にかけられるべき時間を指定する。 既定の値 `0s^v は、遷移が即時に行われることを意味する（すなわち，~animationは生じない）。 `transition-duration$p に対する負の値は、宣言を無効にする。 ◎ This property specifies how long the transition from the old value to the new value should take. By default the value is 0s, meaning that the transition is immediate (i.e. there will be no animation). A negative value for transition-duration renders the declaration invalid.
2.3. `transition-timing-function^p ~prop
`transition-timing-function$p ~propは、遷移の間の中途の値がどの時点で利用されるかを算出する方法を記述する。 これにより，その間の遷移の速度を変化させられるようになる。 これらの効果は、共通的に easing 関数と呼ばれる。 ◎ The transition-timing-function property describes how the intermediate values used during a transition will be calculated. It allows for a transition to change speed over its duration. These effects are commonly called easing functions.
`計時~関数$は、 CSS Timing Functions ~module `CSS-TIMING$r にて別に定義される。 その`入力~進捗~値$には、`所要時間$に対する経過した時間の割合が利用される。 `出力~進捗~値$は、当の値~型に対する補間~規則を適用するときの %p 値 に利用される。 ◎ Timing functions are defined in the separate CSS Timing Functions module [css-timing]. The input progress value used is the percentage of the transition duration, and the output progress value is used as the p value when applying the interpolation rules for the value type.
◎名 `transition-timing-function@p ◎値 `timing-function$t # ◎初 `ease$v ◎適 すべての要素, および `before$pe, `after$pe 疑似要素 ◎継 されない ◎百 受容しない ◎算 `指定値$と同じ ◎順 文法に従う ◎ア ~animate不可 ◎表終2.4. `transition-delay^p ~prop
`transition-delay$p ~propは、 `遅延@ — 遷移がいつ開始されるか — を定義する。 それは、遷移が，その適用-時点から一定~時間おいてから実行に移されるようにする。 `transition-delay$p 値 `0s^v は、~propが変化し次第，遷移が実行に移されることを意味する。 他の場合、~propが変化した瞬間からの時間差を指定し，遷移の実行はその時間差だけ遅延されることになる。 ◎ The transition-delay property defines when the transition will start. It allows a transition to begin execution some some period of time from when it is applied. A transition-delay value of 0s means the transition will execute as soon as the property is changed. Otherwise, the value specifies an offset from the moment the property is changed, and the transition will delay execution by that offset.
`transition-delay$p 値に負の時間差が指定された場合、遷移は~propが変化すると同時に実行に移されるが、指定された負の時間差ですでに実行に移されていたかのように現れるようにする。 すなわち、遷移はその再生期間の途中から始まるように現れることになる。 遷移が暗黙の開始値と負の `transition-delay$p を持つ場合、開始値は~propが変化した瞬間の値からとられる。 ◎ If the value for transition-delay is a negative time offset then the transition will execute the moment the property is changed, but will appear to have begun execution at the specified offset. That is, the transition will appear to begin part-way through its play cycle. In the case where a transition has implied starting values and a negative transition-delay, the starting values are taken from the moment the property is changed.
◎名 `transition-delay@p ◎値 `time$t # ◎初 `0s^v ◎適 すべての要素, および `before$pe, `after$pe 疑似要素 ◎継 されない ◎百 受容しない ◎算 `指定値$と同じ ◎順 文法に従う ◎ア ~animate不可 ◎表終2.5. `transition^p 略式~prop
`transition$p `略式~prop$は、上述の 4 種の~propを単独の~propに結合する。 ◎ The transition shorthand property combines the four properties described above into a single property.
◎名 `transition@p ◎値 `single-transition$t # ◎初 個々の~propを見よ ◎適 すべての要素, および `before$pe, `after$pe 疑似要素 ◎継 されない ◎百 受容しない ◎算 個々の~propを見よ ◎順 文法に従う ◎ア ~animate不可 ◎表終
`single-transition@t =
[ `none$v | `single-transition-property$t ]
|| `time$t
|| `timing-function$t
|| `time$t
この~prop値の中の~itemの順序は重要であることに注意： `time$t として構文解析し得る 1 個目の~itemが， `transition-duration$p （遷移の`所要時間$）にあてがわれ、 `time$t として構文解析し得る 2 個目の~itemが， `transition-delay$p （遷移の`遅延$）にあてがわれる。 ◎ Note that order is important within the items in this property: the first value that can be parsed as a time is assigned to the transition-duration, and the second value that can be parsed as a time is assigned to transition-delay.
この略式~propに複数個の `single-transition$t が与えられていて, その中のいずれかの遷移に `single-transition-property$t として `none$v をとるものがある場合、その宣言~全体が無効になる。 ◎ If there is more than one <single-transition> in the shorthand, and any of the transitions has none as the <single-transition-property>, then the declaration is invalid.
3. 遷移の開始-法
実装は、 `稼働中の遷移たちの集合@ を，保守し~MUST。 この集合に属する各 遷移は、［ 特定の［ 要素, および 略式でない~prop ］の組を適用-対象にし、次の値を持つ：
- `開始~時刻@
- `終止~時刻@
- `開始~値@
- `終止~値@
- `逆再生調整後の開始~値@
- `逆再生 時短係数@
遷移は、この節にて述べるように この集合 に追加され、`完了-$したとき, あるいは 実装にその `取消@ が要求されたときには、 この集合 から除去される。 `逆再生調整後の開始~値$と`逆再生 時短係数$の背後にある原理については、`遷移の逆再生$ 節を見よ。
【 以下における， `遷移を開始-@ するという句は、その遷移を`稼働中の遷移たちの集合$に追加することも意味する。 】
◎ Implementations must maintain a set of running transitions, each of which applies to a specific element and non-shorthand property. Each of these transitions also has a start time, end time, start value, end value, reversing-adjusted start value, and reversing shortening factor. Transitions are added to this set as described in this section, and are removed from this set when they complete or when implementations are required to cancel them. For the rationale behind the reversing-adjusted start value and reversing shortening factor, see §3.1 Faster reversing of interrupted transitions.実装は、`完了-$した遷移からなる `完了した遷移たちの集合@ も保守し~MUST。 これらの遷移のそれぞれは、（`稼働中の遷移$と同様に）特定の［ 要素と略式でない~prop ］の組に適用される。 この仕様では、同じ［ ( ~prop, 要素 ) の組 ］に対し，［ `稼働中の遷移$と`完了した遷移$が同時に存在することは，決してない ］とする不変則を保守する。 ◎ Implementations must also maintain a set of completed transitions, each of which (like running transitions) applies to a specific element and non-shorthand property. This specification maintains the invariant that there is never both a running transition and a completed transition for the same property and element.
要素が文書~内から除かれたときは、実装は，［ `稼働中の遷移$／`完了した遷移$ ］のうち要素~上の遷移すべてを、`取消し$た上で, 除去し~MUST。 ◎ If an element is no longer in the document, implementations must cancel any running transitions on it and remove transitions on it from the completed transitions.
この，完了した遷移たちの集合は、ある種の事例で遷移が繰返されないようにするために必要になる。 すなわち、この仕様は，［ 無関係の~style変化による遷移は誘発されない ］とする不変則を保守する。 ◎ This set of completed transitions needs to be maintained in order to prevent transitions from repeating themselves in certain cases, i.e., to maintain the invariant that this specification tries to maintain that unrelated style changes do not trigger transitions.
完了した遷移たちの集合の保守-が必要とされる例として，継承prop上での遷移がある — 親と子に，同じ~propに対する遷移が指定されていて，親に指定される遷移の`所要時間$が子のそれより長い場合、完了した遷移たちの集合を保守しなければ、実装は，子における遷移が完了した後に，子に対し追加の`遷移を開始-$させ得ることになる。 ◎ An example where maintaining the set of completed transitions is necessary would be a transition on an inherited property, where the parent specifies a transition of that property for a longer duration (say, transition: 4s text-indent) and a child element that inherits the parent’s value specifies a transition of the same property for a shorter duration (say, transition: 1s text-indent). Without the maintenance of this set of completed transitions, implementations could start additional transitions on the child after the initial 1 second transition on the child completes.
要素~上の~propの`算出値$は、次に挙げるものも含む，種々の要因により変化する：
- 要素を文書~木 に挿入する／から除去する こと（いずれも，要素が`算出値$を持つかどうか を変化させ, 選択子の照合を通して他の要素の~styleも変化させ得る）
- 要素の選択子への合致を変化させるような，文書~木の変化
- ~stylesheetや style 属性における変化
実装は、`算出値$を更新することなく，~CSSによる［ ~cascading, 値の算出, 継承~過程 ］ `CSS3CASCADE$r ］の結果による何かを［ 利用-／呈示-／表示- ］してはならない — この仕様は、`算出値$がいつ更新されるかについて，このこと以上の要件は定義しない（すなわち，実装は、単に，~style変化の取扱いの一部として`算出値$を更新していないと主張することで、この仕様の要件を満たすことになる）。 ◎ This specification does not define when computed values are updated, beyond saying that implementations must not use, present, or display something resulting from the CSS cascading, value computation, and inheritance process [CSS3CASCADE] without updating the computed value (which means merely that implementations cannot avoid meeting requirements of this specification by claiming not to have updated the computed value as part of handling a style change).＼
しかしながら、実装が，［ これらの変化のいずれかを反映するために，要素~上の~propの`算出値$を更新するとき ］，あるいは［ 文書に新たに追加された要素~上の~propの`算出値$を算出するとき ］には、これらの変化すべてを反映するように，すべての要素~上の`算出値$を同時に（あるいは少なくとも，同時でないことが検出され得ない様に）更新し~MUST。 この，同時的~style変化の処理は、 `~style変化~event@ と呼ばれる。 （実装は 概して，`~style変化~event$を［ 欲される~screenの更新頻度 ］, あるいは［ 変化に依存する~script~API用に`算出値$／~layout情報の更新が必要になる時機 ］に対応付ける。） ◎ However, when an implementation updates the computed value of a property on an element to reflect one of these changes, or computes the computed value of a property on an element newly added to the document, it must update the computed value for all properties and elements to reflect all of these changes at the same time (or at least it must be undetectable that it was done at a different time).＼ This processing of a set of simultaneous style changes is called a style change event. (Implementations typically have a style change event to correspond with their desired screen refresh rate, and when up-to-date computed style or layout information is needed for a script API that depends on it.)
この仕様は，`~style変化~event$がいつ生じるかについては定義しないので、`算出値$に対するどの変化が 同時的と見なされるかも，定義しない。 作者は、遷移を生じさせ得る変化から微小な時間~後の，遷移~propに対する変化による結果の挙動が、実装~間で異なり得ることに留意すべきである。 ある実装で同時的と見なされる変化が，別の実装でそうなるとは限らないので。 ◎ Since this specification does not define when a style change event occurs, and thus what changes to computed values are considered simultaneous, authors should be aware that changing any of the transition properties a small amount of time after making a change that might transition can result in behavior that varies between implementations, since the changes might be considered simultaneous in some implementations but not others.
`~style変化~event$が生じた際には、実装は，その~eventで変化した`算出値$に基づいて，`遷移を開始-$させ~MUST。 その~style変化~eventの間に, または 前回の`~style変化~event$の間に，要素が文書~内になかった場合、その要素における遷移は，この`~style変化~event$の下では開始されない。 そうでなければ、要素~上のすべての~propに対し，次が定義される： ◎ When a style change event occurs, implementations must start transitions based on the computed values that changed in that event. If an element is not in the document during that style change event or was not in the document during the previous style change event, then transitions are not started for that element in that style change event.＼
- `変化前~style@
-
前回の`~style変化~event$による`算出値$として定義される — ただし：
- ［ CSS Transitions, CSS Animations (`CSS3-ANIMATIONS$r), SMIL Animations (`SMIL-ANIMATION$r, `SVG11$r) などの宣言的~animation ］から導出され，現在-時刻に更新された~styleは除く。
- `変化後~style@
-
`~style変化~event$の開始-時にて既知の情報に基づく，`算出値$として定義される — ただし，その算出においては：
- `変化前~style$における，各種 `animation-*$p ~propの算出値を利用する。
- CSS Transitions からの~styleは、除外する。
- 親の`変化後~style$からの継承ingは、含める。
上述は、［ ~CSS~animationが［ 新たに作成される／取消される ］ことに因り，`変化後~style$が`変化前~style$から相違する ］ことはないことを意味するのに注意。 ◎ Note that this means the after-change style does not differ from the before-change style due to newly created or canceled CSS Animations.
この`変化後~style$の定義は、単独の変化により，先祖とその子孫の両 要素において，同じ~propの遷移が開始され得ることを意味する。 これは、その~propの遷移を指示する `transition-*^p ~propを伴うような 2 個の要素がある下で、一方から他方へ，~prop変化が継承されるときに生じる。 ◎ Note that this definition of the after-change style means that a single change can start a transition on the same property on both an ancestor element and its descendant element. This can happen when a property change is inherited from one element with transition-* properties that say to animate the changing property to another element with transition-* properties that also say to animate the changing property.
これが生じた場合、いずれの遷移も稼働し，通常の~CSS~cascading＆継承 規則に従って, 子孫~上の遷移が先祖~上の遷移を上書きすることになる（`CSS3CASCADE$r）。 ◎ When this happens, both transitions will run, and the transition on the descendant will override the transition on the ancestor because of the normal CSS cascading and inheritance rules ([CSS3CASCADE]).
子孫~上の遷移が先祖~上の遷移より早く完了した場合、子孫はその親からの（まだ遷移-中の）値の継承ingを再開することになる。 この効果は，おそらく望まれないであろうが、本質的には作者が求めたものになる。 ◎ If the transition on the descendant completes before the transition on the ancestor, the descendant will then resume inheriting the (still transitioning) value from its parent. This effect is likely not a desirable effect, but it is essentially doing what the author asked for.
［ `変化前~style$, `変化後~style$ ］を伴う各 %要素, および %要素 上の（`略式~prop$以外の）各 %~prop に対しては、次が定義される： ◎ For each element with a before-change style and an after-change style, and each property (other than shorthands),＼
-
`合致する遷移prop値@ とは、［ %要素 の`変化後~style$ における `transition-property$p ］の値 内で， %~prop に合致する成分~値（もしあれば）のうち，最後の値として定義される。 ◎ define the matching transition-property value as the last value in the transition-property in the element’s after-change style that matches the property, as described in §2.1 The transition-property Property.＼
そのような値があるならば、それに対応して： ◎ If there is such a value, then corresponding to it,＼
- `変化後~style$における［ `transition-duration$p, `transition-delay$p, `transition-timing-function$p ］の値 内に，対応する成分値による［ `所要時間@V, `遅延@V, `計時~関数@V ］（同順）がある（ 値の~listの対応付け規則 を見よ）。 ◎ there is a matching transition duration, a matching transition delay, and a matching transition timing function in the values in the after-change style of transition-duration, transition-delay, and transition-timing-function (see the rules on matching lists).＼
- 遷移の `合計の所要時間@ は、 ( max( `所要時間$V, `0s^v ) ~PLUS `遅延$V ) として，定義される。 ◎ Define the combined duration of the transition as the sum of max(matching transition duration, 0s) and the matching transition delay.＼
- 以下における ( %変化前~値, %変化後~値 ) は、順に， %要素 の ( `変化前~style$, `変化後~style$ ) における %~prop の値とする。 ◎ ＼
-
次に挙げる各種 条件は、以下で引用される：
- `稼働中^cd： %要素 上の %~prop に対する`稼働中の遷移$がある
- `稼働中+^cd： `稼働中^cd ~AND［ その遷移の`終止~値$ ~NEQ %変化後~値 ］
- `完了-^cd： %要素 上の %~prop に対する`完了した遷移$がある（ `稼働中^cd と排他的）
- `完了-+^cd： `完了-^cd ~AND［ その遷移の`終止~値$ ~NEQ %変化後~値 ］
- `合致^cd： `合致する遷移prop値$がある
- `合致+^cd： `合致^cd ~AND［ `合計の所要時間$ ~GT `0s^v ］
- `遷移~可^cd： `合致+^cd ~AND［ ( %変化前~値, %変化後~値 ) は、補間できる, かつ互いに異なる ］
【 これらの条件は、この訳により，原文の以降の記述を整理集約したものである。 】
◎ ＼
【~style変化~eventが生じたときは，】 実装は、各［ %要素 上の %~prop ］に対し，これらが満たす条件に応じて，以下に述べるように動作し~MUST： ◎ For each element and property, the implementation must act as follows:
- 非`稼働中^cd ~AND 非`完了-^cd ~AND `遷移~可^cd ◎ ↓
- `完了-+^cd ~AND `遷移~可^cd ◎ If all of the following are true: • the element does not have a running transition for the property, • the before-change style is different from and can be interpolated with the after-change style for that property, • the element does not have a completed transition for the property or the end value of the completed transition is different from the after-change style for the property, • there is a matching transition-property value, and • the combined duration is greater than 0s,
-
- ~IF `完了-^cd ⇒ `完了-$した遷移を`完了した遷移たちの集合$から除去する ◎ ↓
-
次を伴う`遷移を開始-$する： ◎ then implementations must remove the completed transition (if present) from the set of completed transitions and start a transition whose:
- `開始~時刻$ ~SET `~style変化~event$の時刻 ~PLUS `遅延$V ◎ start time is the time of the style change event plus the matching transition delay,
- `終止~時刻$ ~SET `開始~時刻$ ~PLUS `所要時間$V ◎ end time is the start time plus the matching transition duration,
- `開始~値$ ~SET %変化前~値 ◎ start value is the value of the transitioning property in the before-change style,
- `終止~値$ ~SET %変化後~値 ◎ end value is the value of the transitioning property in the after-change style,
- `逆再生調整後の開始~値$ ~SET %変化前~値 ◎ reversing-adjusted start value is the same as the start value, and
- `逆再生 時短係数$ ~SET 1 ◎ reversing shortening factor is 1.
- `完了-+^cd ~AND 非`遷移~可^cd ◎ Otherwise, if the element has a completed transition for the property and the end value of the completed transition is different from the after-change style for the property, then implementations must remove the completed transition from the set of completed transitions.
- `完了-^cd ~AND 非`合致^cd ◎ ↓
-
- `完了-$した遷移を`完了した遷移たちの集合$から除去する
- `稼働中^cd ~AND 非`合致^cd ◎ If the element has a running transition or completed transition for the property, and there is not a matching transition-property value, then implementations must cancel the running transition or remove the completed transition from the set of completed transitions.
-
- `稼働中の遷移$を`取消す$
- `稼働中+^cd ~AND `合致^cd ◎ If the element has a running transition for the property, there is a matching transition-property value, and the end value of the running transition is not equal to the value of the property in the after-change style, then:
-
- `稼働中の遷移$を`取消す$ ◎ ↓
- ~IF 非`合致+^cd ⇒ ~RET ◎ ↓
- %現在-値 ~LET `稼働中の遷移$における %~prop の`現在-値$ ◎ ↓
- ~IF［［ ( %現在-値, %変化後~値 ) は、互いに異なる, かつ補間できる ］ではない ］ ⇒ ~RET ◎ If the current value of the property in the running transition is equal to the value of the property in the after-change style, or if these two values cannot be interpolated, then implementations must cancel the running transition. ◎ Otherwise, if the combined duration is less than or equal to 0s, or if the current value of the property in the running transition cannot be interpolated with the value of the property in the after-change style, then implementations must cancel the running transition.
-
~IF［ `稼働中の遷移$の`逆再生調整後の開始~値$ ~EQ %変化後~値 ］ ⇒ 次の様にされた新たな`遷移を開始-$する：
注記： この事例が存在するわけについては、`遷移の逆再生$ 節を見よ。
◎ Otherwise, if the reversing-adjusted start value of the running transition is the same as the value of the property in the after-change style (see the section on reversing of transitions for why these case exists), implementations must cancel the running transition and start a new transition whose:-
`逆再生調整後の開始~値$ ~SET `稼働中の遷移$の`終止~値$
注記： これは、遷移の論理的な開始の状態を表現する — その状態に達する前に開始された遷移を無視するための計算を可能にし，同じ遷移の反転の繰返しが正しく働くようにする。
◎ reversing-adjusted start value is the end value of the running transition (Note: This represents the logical start state of the transition, and allows some calculations to ignore that the transition started before that state was reached, which in turn allows repeated reversals of the same transition to work correctly), -
`逆再生 時短係数$ ~SET 次の和の絶対~値を範囲 [0, 1] に切詰めた結果： ◎ reversing shortening factor is the absolute value, clamped to the range [0, 1], of the sum of:
- ( `~style変化~event$の時点における古い遷移の`計時~関数$の出力) ~MUL ( 古い遷移の`逆再生 時短係数$ ) ◎ the output of the timing function of the old transition at the time of the style change event, times the reversing shortening factor of the old transition
- 1 ~MINUS ( 古い遷移の`逆再生 時短係数$ ) ◎ 1 minus the reversing shortening factor of the old transition.
注記： これは、古い遷移において，`逆再生調整後の開始~値$から`終止~値$まで辿られた値~空間の部位を表現する（時間の長さではなく） — ただし，［ %y1, %y2 のいずれかが [0, 1] 区間の外にあるとき ］の`計時~関数$を取扱う際における，絶対~値と切詰めによる部分は除外される。 ◎ Note: This represents the portion of the space between the reversing-adjusted start value and the end value that the old transition has traversed (in amounts of the value, not time), except with the absolute value and clamping to handle timing functions that have y1 or y2 outside the range [0, 1].
-
`開始~時刻$ ~SET ( `~style変化~event$の時刻 ) ~PLUS 次に与える値 ⇒＃ `遅延$V ~GTE 0 ならば `遅延$V ／ `遅延$V ~LT 0 ならば ( ( 新たな遷移の `逆再生 時短係数$ ) ~MUL `遅延$V ) ◎ start time is the time of the style change event plus: • if the matching transition delay is nonnegative, the matching transition delay, or • if the matching transition delay is negative, the product of the new transition’s reversing shortening factor and the matching transition delay,
- `終止~時刻$ ~SET `開始~時刻$ ~PLUS ( `所要時間$V ~MUL ( 新たな遷移の`逆再生 時短係数$ ) ) ◎ end time is the start time plus the product of the matching transition duration and the new transition’s reversing shortening factor,
- `開始~値$ ~SET %現在-値 ◎ start value is the current value of the property in the running transition,
- `終止~値$ ~SET %変化後~値 ◎ end value is the value of the property in the after-change style,
-
-
~ELSE ⇒ 次の様にされた新たな`遷移を開始-$する： ◎ Otherwise, implementations must cancel the running transition and start a new transition whose:
- `開始~時刻$ ~SET ( `~style変化~event$ の時刻 ) ~PLUS `遅延$V ◎ start time is the time of the style change event plus the matching transition delay,
- `終止~時刻$ ~SET `開始~時刻$ ~PLUS `所要時間$V ◎ end time is the start time plus the matching transition duration,
- `開始~値$ ~SET %現在-値 ◎ start value is the current value of the property in the running transition,
- `終止~値$ ~SET %変化後~値 ◎ end value is the value of the property in the after-change style,
- `逆再生調整後の開始~値$ ~SET %現在-値 ◎ reversing-adjusted start value is the same as the start value, and
- `逆再生 時短係数$ ~SET 1 ◎ reversing shortening factor is 1.
- 他の場合
-
【 原文には記述がないが、次の場合が残されている： 】
- `稼働中^cd ~AND 非`稼働中+^cd ~AND `合致^cd
- `完了-^cd ~AND 非`完了-+^cd ~AND `合致^cd
- 非`稼働中^cd ~AND 非`完了-^cd ~AND 非`遷移~可^cd
最後の事例は、 %要素 上の %~prop は，遷移に関わらないことを意味する（したがって何もしないことになる）。 1, 2 番目の事例は起こり得ない？
注記： 上の規則は： ~animatableな~propの`算出値$が変化するときに，開始する遷移たちは、［ その~prop対する新たな算出値が最初に算出される時点での，［ `transition-property$p, `transition-duration$p, `transition-timing-function$p, `transition-delay$p ］~propの値 ］に基づくことを意味する。 従って、遷移を引き起こし得る~propの変化が生じると同時に，これらのいずれかの `transition-*^p ~propが変化した場合、その変化後の 新たな 値が，その遷移を制御することになる。 ◎ Note that the above rules mean that when the computed value of an animatable property changes, the transitions that start are based on the values of the transition-property, transition-duration, transition-timing-function, and transition-delay properties at the time the animatable property would first have its new computed value. This means that when one of these transition-* properties changes at the same time as a property whose change might transition, it is the new values of the transition-* properties that control the transition.
これにより，作者は、二つの状態を行き来するような遷移に対しては， “順方向” と “逆方向” の遷移に対する `transition-*^p ~propに，異なる値を指定できるようになる（ただし，未完了の遷移が中断されたときの特別な逆再生の挙動については、`遷移の逆再生$ 節を見よ）。 作者は［ `transition-duration$p ／ `transition-timing-function$p ／ `transition-delay$p ］の値を，遷移を誘発させる値を指定するときと同じ規則に従って、指定できる。 あるいは，それらの~propの変化による遷移の誘発-と同時に、これらの~propを変更できる。 これらが，遷移に影響する［ `transition-*^p ~propの新たな値 ］になり，結付けられている 目的の （ “to” ）遷移 値に利用されることになる。 例えば： ◎ This provides a way for authors to specify different values of the transition-* properties for the “forward” and “reverse” transitions, when the transitions are between two states (but see below for special reversing behavior when an incomplete transition is interrupted). Authors can specify the value of transition-duration, transition-timing-function, or transition-delay in the same rule where they specify the value that triggers the transition, or can change these properties at the same time as they change the property that triggers the transition. Since it’s the new values of these transition-* properties that affect the transition, these values will be used for the transitions to the associated transitioning values. For example:
li {
transition: background-color linear 1s;
background: blue;
}
li:hover {
background-color: green;
transition-duration: 2s; /*
`hover^ps 状態へ *向かう* 遷移に適用される
◎
applies to the transition *to* the :hover state
*/
}
これらの~style規則を伴う~list~item（ li ）が `hover^ps 状態になったとき、 `background-color$p がその新たな値（ `green^v ）になる時点の `transition-duration$p の算出値は `2s^v になるので， `blue^v から `green^v への遷移には 2 秒かかることになる。 一方で、~list~itemが `hover^ps 状態から脱したときの `green^v から `blue^v への遷移には 1 秒かかることになる。 ◎ When a list item with these style rules enters the :hover state, the computed transition-duration at the time that background-color would have its new value (green) is 2s, so the transition from blue to green takes 2 seconds. However, when the list item leaves the :hover state, the transition from green to blue takes 1 second.
注記： ~propの遷移がいったん開始されたなら（その遅延の段階も含む），その遷移が完了する前に［ `transition-timing-function$p, `transition-duration$p, `transition-delay$p ］~propが変化したとしても、遷移は，元の［ `計時~関数$, `所要時間$, `遅延$ ］に基づいて継続される。 一方で， `transition-property$p ~propに対しては、［ 仮にその変化が遷移が生じる前に起きたなら，遷移は開始されなくなるような値 ］に変化した場合，遷移は停止される（加えて，~propは即時にその最終的な値に変化する）。 ◎ Note that once the transition of a property has started (including being in its delay phase), it continues running based on the original timing function, duration, and delay, even if the transition-timing-function, transition-duration, or transition-delay property changes before the transition is complete. However, if the transition-property property changes such that the transition would not have started, the transition stops (and the property immediately changes to its final value).
注記： 上の規則は、宣言的~animationの結果として~propの算出値が変化するときには、（~scriptによる~animationとは対照的に）遷移は開始されないことを意味する。 これは、`変化前~style$が［ 宣言的~animationに対する最新の~style ］を含むために起こる。 ◎ Note that above rules mean that transitions do not start when the computed value of a property changes as a result of declarative animation (as opposed to scripted animation). This happens because the before-change style includes up-to-date style for declarative animations.
3.1. 中断された遷移の速やかな逆再生
共通的に見られる遷移効果の多くは， 2 つの状態の間の遷移を孕んでいる — 例えば、~mouse-pointerが［ UI 要素~上へ移動したときと，その後 要素の外へ移動したとき ］に生じる遷移など。 これらの効果は、稼働中の遷移が完了する前に中断され, ~propが遷移の開始~値に再設定されることが，共通して生じ得る。 例えば、要素~上の~hover効果において，~mouse-pointerが要素に入ったときに遷移が開始され，効果が完了する前に要素から出たときなど。 中断された遷移と後から来る遷移が，同じ`所要時間$と`計時~関数$を利用して実行される場合、後者の遷移は，短縮された距離を 指定された時間~全部をかけて移動するので、結果の効果は 予想に反して非対称になり得る。 この仕様では、代わりに， 2 回目の遷移にかける時間を短縮する。 ◎ Many common transitions effects involve transitions between two states, such as the transition that occurs when the mouse pointer moves over a user interface element, and then later moves out of that element. With these effects, it is common for a running transition to be interrupted before it completes, and the property reset to the starting value of that transition. An example is a hover effect on an element, where a transition starts when the pointer enters the element, and then the pointer exits the element before the effect has completed. If the outgoing and incoming transitions are executed using their specified durations and timing functions, the resulting effect can be distractingly asymmetric because the second transition takes the full specified time to move a shortened distance. Instead, this specification makes second transition shorter.
上の規則により これを生じさせる仕組みは、 `逆再生 時短係数$, および `逆再生調整後の開始~値$を孕む。 特に，`逆再生 時短係数$ ≤ 1 のときには必ず、この逆再生の挙動がある。 ◎ The mechanism the above rules use to cause this involves the reversing shortening factor and the reversing-adjusted start value. In particular, the reversing behavior is present whenever the reversing shortening factor is less than 1.
注記： これらの規則は、 2 個より多い状態を孕む遷移~patternにおける問題すべてに，取組むものではない。 ◎ Note that these rules do not fully address the problem for transition patterns that involve more than two states.
注記： これらの規則により、新たな遷移の`計時~関数$は，その全体（の定義域）が利用される — 計時~関数の中途にジャンプするのではなく（その場合，目障りな効果が生じ得る）。 ◎ Note that these rules lead to the entire timing function of the new transition being used, rather than jumping into the middle of a timing function, which can create a jarring effect.
注記： これは、 Working Group が考えている，いくつかの可能性の一つである。 それらのいくつかは、 Working Group による 2013-06-07 の解決策に 2013-11-11 による編集を加えたものも含め， 逆再生デモ にて見られる。 ◎ This was one of several possibilities that was considered by the working group. See the reversing demo demonstrating a number of them, leading to a working group resolution made on 2013-06-07 and edits made on 2013-11-11.
4. 遷移の適用
要素~上の~propにて，遷移が進行中の間（すなわち，遷移が開始 以後から その`終止~時刻$前まで）、その遷移により，~CSS~cascadeの［ `CSS3CASCADE$r にて定義される CSS Transitions 用の~level ］に `現在-値@ と呼ばれる~styleが取り込まれる。 ◎ When a property on an element is undergoing a transition (that is, when or after the transition has started and before the end time of the transition) the transition adds a style called the current value to the CSS cascade at the level defined for CSS Transitions in [CSS3CASCADE].
注記： これは，~CSS遷移の結果による`算出値$が、他の算出値と同様に，子孫にも継承されることを意味する。 通常の事例では、継承propの遷移が，（作者から期待されるとおりに）子孫~要素にも適用されることを意味する。 ◎ Note that this means that computed values resulting from CSS transitions can inherit to descendants just like any other computed values. In the normal case, this means that a transition of an inherited property applies to descendant elements just as an author would expect.
実装はこの値を，同じ要素~上の同じ~prop上で CSS Animation (`CSS3-ANIMATIONS$r) が現在 進行中でないとき, そのときに限り、~cascadeに取り込ま~MUST。 ◎ Implementations must add this value to the cascade if and only if that property is not currently undergoing a CSS Animation ([CSS3-ANIMATIONS]) on the same element.
注記： この，［ 同じ要素~上の同じ~prop上で~animationが稼働中のときには，~cascadeに適用されない ］とされる遷移の挙動は、遷移が［ 開始されたかどうか／終止したかどうか ］には影響しない。 遷移が稼働中かどうかを検出する~API（`遷移~event$など）は、依然として，遷移が稼働中であることを報告する。 ◎ Note that this behavior of transitions not applying to the cascade when an animation on the same element and property is running does not affect whether the transition has started or ended. APIs that detect whether transitions are running (such as transition events) still report that a transition is running.
現在-時刻が遷移の`開始~時刻$より前である場合（すなわち，現在-時刻は遷移の`遅延$の段階）、この`現在-値$は，［ 遷移の`開始~値$に算出されることになる，指定style 【 specified style — `指定値$】 ］である。 ◎ If the current time is at or before the start time of the transition (that is, during the delay phase of the transition), the current value is a specified style that will compute to the start value of the transition.
現在-時刻が遷移の`開始~時刻$より後である場合（すなわち，現在-時刻は遷移の`所要時間$の段階）、`現在-値$は，指定styleであり，遷移の［ `開始~値$／`終止~値$ ］を［ %始値／%終値 ］に利用し, ［ ( 現在-時刻 ~MINUS 開始~時刻 ) ~DIV ( 終止~時刻 ~MINUS 開始~時刻 ) ］を`計時~関数$への入力に利用して， ~propを補間した結果 に算出されることになる。 ◎ If the current time is after the start time of the transition (that is, during the duration phase of the transition), the current value is a specified style that will compute to the result of interpolating the property using the start value of the transition as Vstart, using the end value of the transition as Vend, and using (current time - start time) / (end time - start time) as the input to the timing function.
5. 遷移の完了
`稼働中の遷移$は、その`終止~時刻$以降のある時点に, かつ `終止~時刻$以降の最初の`~style変化~event$より早い時点に `完了-@ する。 遷移が完了するとき，実装は、その時点に完了した すべての遷移を，`稼働中の遷移たちの集合$から`完了した遷移たちの集合$へ移動してから、それらの完了に対する`遷移~event$を発火し~MUST。 （注記： そうしなければ — すなわち、遷移すべてが移動される前に，いずれか完了に対する~eventが発火された場合 — それに対する~event~handlerが，最新の［ 算出style／~layout~data ］を要請した場合に、必要な遷移が完了する前に，`~style変化~event$が起こり得るので。 ） ◎ Running transitions complete at a time that equal to or after their end time, but prior to to the first style change event whose time is equal to or after their end time. When a transition completes, implementations must move all transitions that complete at that time from the set of running transitions to the set of completed transitions and then fire the events for those completions.＼ (Note that doing otherwise, that is, firing some of the events before doing all of the moving from running transitions to completed transitions, could allow a style change event to happen without the necessary transitions completing, since firing the event could cause a style change event, if an event handler requests up-to-date computed style or layout data.)
6. 遷移~event
~CSS遷移の［ 作成- ／ 開始- ／ 完了- ／ 取消 ］時には、対応する `DOM Event$ が生成される。 ~eventは、遷移される要素~上の各~propごとに，その要素へ`配送-$される。 これにより、内容~開発者は，遷移の変化に同期する動作を遂行できるようになる。 ◎ The creation, beginning, completion, and cancellation of CSS transitions generate corresponding DOM Events. An event is dispatched to the element for each property that undergoes a transition on that element. This allows a content developer to perform actions that synchronize with changes to transitions.
各~eventは、遷移が結付けられている~propの名前と遷移の`所要時間$を供する。 ◎ Each event provides the name of the property the transition is associated with as well as the duration of the transition.
6.1. ~interface `TransitionEvent^I
`TransitionEvent$I ~interfaceは、遷移に結付けられている特定の文脈情報を供する。 ◎ The TransitionEvent interface provides specific contextual information associated with transitions.
[`Exposed$=Window, Constructor(`CSSOMString$ %type, optional `TransitionEventInit$I %transitionEventInitDict)] interface `TransitionEvent@I : `Event$I { readonly attribute `CSSOMString$ `propertyName$m; readonly attribute double `elapsedTime$m; readonly attribute `CSSOMString$ `pseudoElement$m; }; dictionary `TransitionEventInit@I : `EventInit$I { `CSSOMString$ `propertyName@mb = ""; double `elapsedTime@mb = 0.0; `CSSOMString$ `pseudoElement@mb = ""; };
- `propertyName@m
- 遷移に結付けられている~CSS~propの名前。 ◎ propertyName, of type CSSOMString, readonly ◎ The name of the CSS property associated with the transition.
- 注記： これは常に下位propの名前になる。 略式~propを指定したときに その下位propに生じる遷移効果については、 `transition-property$p を見よ。 ◎ Note: This is always the name of a longhand property. See transition-property for how specifying shorthand properties causes transitions on longhands.
- `elapsedTime@m
- 秒単位による，この~eventが発火された時点での，遷移の稼働にかけられた時間の長さ — 遅延~段階に~~費やされた時間は含まれない。 この属性~値の精確な計算は、各~event型ごとに定義される。 ◎ elapsedTime, of type double, readonly ◎ The amount of time the transition has been running, in seconds, when this event fired not including any time spent in the delay phase. The precise calculation for of this member is defined along with each event type.
- `pseudoElement@m
- 遷移が~CSS疑似要素に対して生じた場合、その疑似要素の名前になる（先頭の 2 個の~colonも名前に含まれる）（この場合、~eventの `target$m はその疑似要素に対応している要素になる）。 他の場合、すなわち，遷移が要素に対して生じた場合は空~文字列になる（この場合，~eventの `target$m はその要素になる）。 ◎ pseudoElement, of type CSSOMString, readonly ◎ The name (beginning with two colons) of the CSS pseudo-element on which the transition occurred (in which case the target of the event is that pseudo-element’s corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element).
- `TransitionEvent( type, transitionEventInitDict )@m
- `~event構築子$。 ◎ TransitionEvent(type, transitionEventInitDict) is an event constructor.
6.2. 各種 `TransitionEvent^I 型
生じ得る遷移~eventには、以下に挙げるものがある： ◎ The different types of transition events that can occur are:
- `transitionrun@et
- `transitionrun$et ~eventは、遷移の作成-時（すなわち `稼働中の遷移たちの集合$に追加されたとき）に生じる。 ◎ The transitionrun event occurs when a transition is created (i.e., when it is added to the set of running transitions).
- この~eventに対する `elapsedTime$m 値は、 min ( max( ~MINUS `transition-delay$p , 0), `transition-duration$p ) に等しくなる（ `transition-delay$p が負でなければゼロ）。 ◎ A negative transition-delay will cause the event to fire with an elapsedTime equal to the absolute value of the delay capped to the transition-duration of the animation. That is, the elapsed time is equal to min(max(-transition-delay, 0), transition-duration).
-
- 浮上する
- 取消~不可
- 文脈情報： `propertyName$m, `elapsedTime$m, `pseudoElement$m
- `transitionstart@et
- `transitionstart$et ~eventは、遷移が遅延~段階を終えたときに生じる。 ◎ The transitionstart event occurs when a transition’s delay phase ends.
- この~eventに対する `elapsedTime$m 値は、 `transitionrun$et ~eventに対するときと同じになる。 ◎ The value of elapsedTime for transitionstart events is the same as the value used for transitionrun events.
-
- 浮上する
- 取消~不可
- 文脈情報： `propertyName$m, `elapsedTime$m, `pseudoElement$m
- `transitionend@et
- `transitionend$et ~eventは、遷移が完了したときに生じる。 `transition-property$p が除去されるなど，完了する前に遷移が除去された場合、この~eventは発火されない。 ◎ The transitionend event occurs at the completion of the transition. In the case where a transition is removed before completion, such as if the transition-property is removed, then the event will not fire.
- この~eventに対する `elapsedTime$m 値は、 `transition-duration$p の値に等しくなる。 ◎ The value of elapsedTime for this event is equal to the value of transition-duration.
-
- 浮上する
- 取消~不可
- 文脈情報： `propertyName$m, `elapsedTime$m, `pseudoElement$m
- `transitioncancel@et
- `transitioncancel$et ~eventは、遷移が`取消され$たときに生じる。 ◎ The transitioncancel event occurs when a transition is canceled.
- この~eventに対する `elapsedTime$m 値は、遷移が その遅延~段階を終えた時点から取消された時点までの秒数になる。 遷移の `transition-delay$p が負の場合、遷移の始まりは，遷移が実際に誘発された時点から `transition-delay$p の絶対~値（秒数）だけ前の時点とする。 対して，遷移の `transition-delay$p が正の場合に，~eventが遅延~段階を終える前に発火された場合、 `elapsedTime$m はゼロになる。 ◎ The elapsedTime for transitioncancel events is the number of seconds from the end of the transition’s delay to the moment when the transition was canceled. If the transition had a negative transition-delay, the beginning of the transition is the moment equal to the absolute value of transition-delay seconds prior to when the transition was actually triggered. Alternatively, if the transition had a positive transition-delay and the event is fired before the transition’s delay has expired, the elapsedTime will be zero.
-
- 浮上する
- 取消~不可
- 文脈情報： `propertyName$m, `elapsedTime$m, `pseudoElement$m
6.3. 要素および `Document^I ／ `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型$ |
|---|---|
| `ontransitionrun$m | `transitionrun$et |
| `ontransitionstart$m | `transitionstart$et |
| `ontransitionend$m | `transitionend$et |
| `ontransitioncancel$m | `transitioncancel$et |
7. ~DOM~interface
この仕様は、`遷移~event$に対する`~event~handler~IDL属性$を追加して， ~HTMLの `GlobalEventHandlers$I ~interfaceを拡張する — 要素および `Document^I ／ `Window^I ~obj上の~event~handler 節に定義されるように。 ◎ This specification extends the GlobalEventHandlers interface from HTML to add event handler IDL attributes for transition events as defined in §6.3 Event handlers on elements, Document objects, and Window objects.
7.1. ~IDL定義
partial interface `GlobalEventHandlers$I {
attribute `EventHandler$I `ontransitionrun@m;
attribute `EventHandler$I `ontransitionstart@m;
attribute `EventHandler$I `ontransitionend@m;
attribute `EventHandler$I `ontransitioncancel@m;
};
8. ~animatableな~prop型
~prop【の値】型には補間できる — すなわち，ある値から別の値へ滑らかに~animateし得る — ものもあれば、できない — したがって，ある値から他へは単段でしか~animateし得ない — ものもある。 ◎ Some property types can be interpolated, which means they can animate smoothly from one value to another. Other property types cannot, and thus animate only in a single step from one value to the other.
8.1. 補間できる~prop型の~animation
2 個の値［ %始値, %終値 ］の補間には、`計時~関数$の出力 %p が利用され，値~空間の中で補間が占める区間を与える。 すなわち，補間の結果は、次で与えられる：
%結果値 = ( 1 ~MINUS %p ) ~MUL %始値 ~PLUS %p ~MUL %終値◎ When interpolating between two values, Vstart and Vend, interpolation is done using the output p of the timing function, which gives the portion of the value space that the interpolation has crossed. Thus the result of the interpolation is Vres = (1 - p) ⋅ Vstart + p ⋅ Vend.
この %結果値 が~propに許容される値の範囲に入らない場合、その範囲に入るように切詰められる。 これが生じ得るのは、 %p が [0, 1] 区間の外にある場合 — すなわち，`計時~関数$ 【が， cubic-bezier にされている場合であって, その制御点の y 座標】 の %y1, %y2 のいずれかが [0, 1] 区間の外に出ている場合である。 ◎ However, if this value (Vres) is outside the allowed range of values for the property, then it is clamped to that range. This can occur if p is outside of the range 0 to 1, which can occur if a timing function is specified with a y1 or y2 that is outside the range 0 to 1.
各種~prop型において［ 遷移／~animation ］がどう進行するかを，以下に述べる： ◎ The following describes how each property type undergoes transition or animation.
- `色@（ color ）
- ( R, G, B, α ) 成分を通して補間される（それぞれが数と扱われた上で — 下を見よ）。 補間は乗算済みの色に対して行われる（すなわち，色に指定された ( R, G, B ) 成分は α により乗算されている）。 ◎ color: interpolated via red, green, blue and alpha components (treating each as a number, see below). The interpolation is done between premultiplied colors (that is, colors for which the red, green, and blue components specified have been multiplied by the alpha).
- `長さ@（ length ）
- 実数として補間される。 ◎ length: interpolated as real numbers.
- `百分率@（ percentage ）
- 実数として補間される。 ◎ percentage: interpolated as real numbers.
- `長さ, 百分率, または calc 式@（ length, percentage, or calc ）
- 両者の値が長さである場合は 長さとして補間され，両者の値が百分率である場合は 百分率として補間される。 他の場合の両者の値は、［［ 長さと百分率（いずれもゼロをとり得る） ］の和である `calc()$f 関数 ］に変換された上で、それらの `calc()$f 関数がとる各 片割れ 【長さ どうし, および 百分率 どうし】 が，実数として補間される。 ◎ length, percentage, or calc: when both values are lengths, interpolated as lengths; when both values are percentages, interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
- `整数@（ integer ）
- 実数~空間の中で補間された上で，最も近い整数に — ただし， 2 数と等距離にある場合は正の無限大~側に — 丸められる。 ◎ integer: interpolated via discrete steps (whole numbers). The interpolation happens in real number space and is converted to an integer by rounding to the nearest integer, with values halfway between a pair of integers rounded towards positive infinity.
- `~font-weight@（ font weight ）
- 実数~空間の中で補間された上で，最も近い 100 の倍数に — ただし，２数と等距離にある場合は正の無限大~側に — 丸められる。 ◎ font weight: interpolated via discrete steps (multiples of 100). The interpolation happens in real number space and is converted to an integer by rounding to the nearest multiple of 100, with values halfway between multiples of 100 rounded towards positive infinity.
- `実数@（ number ）
- 実数（浮動小数点数）として補間される。 ◎ number: interpolated as real (floating point) numbers.
- `矩形@（ rectangle ）
- x, y, width, height の各種~成分が個別に実数として補間される。 ◎ rectangle: interpolated via the x, y, width and height components (treating each as a number).
- `可視性@（ visibility ）
- 値の一方が `visible^v である場合、離散的な階段として補間される。 ここで，`計時~関数$の［ 0 より大きく, 1 より小さい ］値は `visible^v に対応付けられ， 計時~関数の他の値（遷移の開始／終止のとき, または Y 値が [0, 1] 区間の外側にあるときの `cubic-bezier()$f 関数の結果としてのみ生じ得る）は、より近い端点に対応付けられる。 いずれの値も `visible^v でない場合、補間-可能でない。 ◎ visibility: if one of the values is visible, interpolated as a discrete step where values of the timing function between 0 and 1 map to visible and other values of the timing function (which occur only at the start/end of the transition or as a result of cubic-bezier() functions with Y values outside of [0, 1]) map to the closer endpoint; if neither value is visible then not interpolable.
- `影~list@（ shadow list ）
- 値 `none^v は長さ 0 の~listと扱う。 ~list内の各 対応する影~pairは、その色~成分, および［ x, y, blur, spread ］成分 【 順に，影の［ 縦／横 offset, ぼかし半径, 拡幅距離 ］】 を通して補間される（色~成分は色として, 他は`長さ$として, spread は適用可能な場合のみ）。 `inset$v 成分については、その有無が一致しない~pairが 一つでもあれば、~list全体が補間-可能でない。 他の場合、補間の結果における `inset$v の有無は，入力~pairにおける有無と同じになる。 影~listの長さが不揃いの場合、短い方の~listの末尾部分に，［ 色 `transparent$v, 長さ `0^v, ［ `inset$v は、長い方の~listの対応する~itemにも有る場合に限り，有り ］］にされた影が付け加えられる。 ◎ shadow list: Each shadow in the list (treating none as a 0-length list) is interpolated via the color (as color) component, and x, y, blur, and (when appropriate) spread (as length) components. For each shadow, if both input shadows are inset or both input shadows are not inset, then the interpolated shadow must match the input shadows in that regard. If any pair of input shadows has one inset and the other not inset, the entire shadow-list is uninterpolable. If the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is transparent, all lengths are 0, and whose inset (or not) matches the longer list.
- `~gradient@（ gradient ）
- 各 `色停$（ color stop ）の［ 位置pと色 ］を通して補間される。 ~animateされるためには 【補間-可能になるためには】 、両者の型（放射型または線型）が同じであり，かつ 色停の個数も同じで~MUST。 注記： `CSS3-IMAGES$r がこの定義を拡張し得る。 ◎ gradient: interpolated via the positions and colors of each stop. They must have the same type (radial or linear) and same number of stops in order to be animated. Note: [CSS3-IMAGES] may extend this definition.
- `~paint-server@（ paint server (SVG) ）
- 補間は、 gradient どうし, および 色どうしの間でのみ~supportされる。 そうであれば上述の様に機能する。 ◎ paint server (SVG): interpolation is only supported between: gradient to gradient and color to color. They then work as above.
- 他の型による`単純~list@（ simple list of other types ）
- 互いの~listに同じ数の~itemが在り，かつ 対応するどの値~pairも補間できるならば、~list内の各~itemは，それぞれの型に与えられる規則を利用して補間される。 他の場合の値は補間-可能でない。 ◎ simple list of other types: If the lists have the same number of items, and each pair of values can be interpolated, each item in the list is interpolated using the rules given for those types. Otherwise the values are not interpolable.
- 他の型による`繰返可能~list@（ repeatable list of other types ）
- 結果の~listの長さは入力~listの長さの最小公倍数になる。 補間は，それぞれの入力~listをその長さまで繰返した上で，それぞれの値~pairについて行われる。 いずれかの値~pairが補間できない場合、その~listは補間-可能でない。 繰返可能~listの概念により、~listを概念的に一定の長さまで, あるいは無限に繰返して（例えば `background-origin$p は `background-image$p の~listの長さになるまで繰返される），どの値についても，遷移を支障なく与え, `算出値$が適正な結果を表現し得る（従って，正しく継承し得る）ようになる。 ◎ repeatable list of other types: The result list has a length that is the least common multiple of the lengths of the input lists. Each item in the result is the interpolation of the value from each input list repeated to the length of the result list. If a pair of values cannot be interpolated, then the lists are not interpolable. The repeatable list concept ensures that a list that is conceptually repeated to a certain length (as background-origin is repeated to the length of the background-image list) or repeated infinitely will smoothly transition between any values, and so that the computed value will properly represent the result (and potentially be inherited correctly).
将来の仕様は、~animateし得る追加の型を定義し得る。 ◎ Future specifications may define additional types that can be animated.
`略式~prop$, および `all$v 値 に対する（その略式~propの中の）~animatableな~propに対し，どのように~animationが適用されるかについては、 `transition-property$p の定義を見よ。 ◎ See the definition of transition-property for how animation of shorthand properties and the all value is applied to any properties (in the shorthand) that can be animated.
8.2. 他の~prop型に対する~animation
補間できない 2 個の値 %始値, %終値 の合間の補間は，`計時~関数$の出力 %p を利用して行われる。 %p ~LT 0.5 の場合の補間の結果は %始値 になり、 %p ~GTE 0.5 の場合の補間の結果は %終値 になる。 ◎ When interpolating between two values that cannot be interpolated, Vstart and Vend, interpolation is done using the output p of the timing function. If p is less than 0.5, then the result of the interpolation is Vstart; if p is greater than or equal to 0.5, then the result of the interpolation is Vend.
これは、実装にまだ~~反映されていない最近の変更である（この変更の前までは、 CSS Transitions ／ CSS Animations は、そのような変化に対しては稼働させていなかった）。 そのため、既存の~Web内容と互換でなくなる可能性がある。 その場合、この挙動を， （ CSS Transitions は対象にせず） CSS Animations のみに, あるいは`階段~計時~関数$のみに制約して、問題を軽減することになるかもしれない。 ◎ This is a recent change to which implementations have not yet updated. (Prior to the change CSS Transitions and CSS Animations did not run on such changes.) It’s possible that it won’t be compatible with existing Web content. If that is the case, the problem may be mitigated by restricting this behavior only to CSS Animations (and not to CSS Transitions), and/or restricting it to step timing functions.
9. ~animatableな~prop
各種~CSS~propの定義は、どのようなときに~propの値を補間できるかを， 前節 の~prop型の定義への参照を通して定義する。 ~animateされる値は、~propの 開始／終止 値の両者とも述べられた型を持つならば，補間される。 （ “`長さ, 百分率, または calc 式$” のような組成-型が挙げられている場合、これは，その両方の値がその組成-型に該当しなければならないことを意味する）。 “ A または B” のような形をとる複数の型が挙げられている場合、補間-可能になるためには，両者の値とも同じ型で~MUST。 ◎ The definition of each CSS property defines when the values of that property can be interpolated by referring to the definitions of property types in the previous section. The animated value is interpolated from the from and to values when both the from and the to values of the property have the type described. (When a composite type such as "length, percentage, or calc" is listed, this means that both values must fit into that composite type.) When multiple types are listed in the form "either A or B", both values must be of the same type to be interpolable.
他の場合、始値から終値へは補間できないので、~animationは単段で行われる。 ◎ Otherwise, since the from and to values cannot be interpolated, the animation is done in a single step.
この仕様にて定義される `transition-*^p ~prop自体は、遷移されることはない。 ◎ The transition-* properties defined in this specification do not undergo transitions.
この仕様が開発された時点で存在する~propに対しては、この仕様が，それらがどう~animateされるかを定義する。 しかしながら，将来の~CSS仕様も［ 追加の~prop／ 既存の~propに対する追加の値／ 既存の値に対する追加の［ ~animationの挙動 ］］を定義し得る。 将来の~CSS仕様は、新たな~animationの挙動を述べ，より適切な場所でその挙動を定義するため、その~prop定義表に “~animation” の欄を含めるべきである（ `CSS21$r, 1.4.2 節 による他の欄に加えて）。 この欄には、次のいずれかが記されるべきである：
- “~animate不可” ⇒ ~propは~animateできないことを指示する。
- “離散的” ⇒ ~propは補間できないので単段で~animateされることを指示する。
- その~animationの挙動（上の節の ~animatableな~prop値~型 に記された挙動になるか, あるいは新たに定義される挙動）への参照を通して，~propがどのように~animateされるかを定義する。 その種の定義は、この仕様に与えられるものを上書きする。
【† ~animate不可（ `not animatable^en ）と離散的（ `discrete^en ）は、原文における `no^en （ “不可” ）を，他の多くの~CSS仕様の実際の記述に倣うように分岐したものである。 この仕様の各種 `transition-*^p ~propも~animateできないので、 “不可” に代えて “~animate不可” にしている。 】
◎ For properties that exist at the time this specification was developed, this specification defines how they are animated. However, future CSS specifications may define additional properties, additional values for existing properties, or additional animation behavior of existing values. In order to describe new animation behaviors and to have the definition of animation behavior in a more appropriate location, future CSS specifications should include an "Animatable:" line in the summary of the property’s definition (in addition to the other lines described in [CSS21], section 1.4.2). This line should say "no" to indicate that a property cannot be animated or should reference an animation behavior (which may be one of the behaviors in the Animation of property types section above, or may be a new behavior) to define how the property animates. Such definitions override those given in this specification.“`Animatable^en” という呼称は、最早~~意味を成さなくなった — おそらく、 “補間” に改称されるべきである†。 また、【“~animation” 欄の】 “不可” は［ “離散的” ／ “飛び飛び” ］等に 【または、~animateできない場合は “~animate不可” に】 改称されるべきである。 mailing list の message 1, message 2 を見よ。 ◎ It no longer makes sense for this line to be called "Animatable". It should probably be renamed to "Interpolation", and the "no" value renamed to "discrete" or "in steps". See mailing list thread: message 1, message 2
【† `Animatable^en は、~prop定義表の “~animation” 欄の，原文における旧来の名称。 現在の多くの仕様では `Animation Type^en に改称されている（和訳では区別なく “~animation” ）。 】
9.1. ~CSSの~prop
次の定義は CSS Level 2 Revision 1 （ `CSS21$r ）および CSS Color Module Level 3 （ `CSS3COLOR$r ）の~propに対する~animationの挙動を定義する。 ◎ The following definitions define the animation behavior for properties in CSS Level 2 Revision 1 ([CSS21]) and in Level 3 of the CSS Color Module ([CSS3COLOR]).
| ~prop名 | 値の型 |
|---|---|
| `background-color$p | `色$ |
| `background-position$p | ［ `長さ, 百分率, または calc 式$ からなる `単純~list$ ］による `繰返可能~list$ ◎ as repeatable list of simple list of length, percentage, or calc |
| `border-bottom-color$p | `色$ |
| `border-bottom-width$p | `長さ$ |
| `border-left-color$p | `色$ |
| `border-left-width$p | `長さ$ |
| `border-right-color$p | `色$ |
| `border-right-width$p | `長さ$ |
| `border-spacing$p | `長さ$ からなる `単純~list$ ◎ simple list of length |
| `border-top-color$p | `色$ |
| `border-top-width$p | `長さ$ |
| `bottom$p | `長さ, 百分率, または calc 式$ |
| `clip$p | `矩形$ |
| `color$p | `色$ |
| `font-size$p | `長さ$ |
| `font-weight$p | `~font-weight$ |
| `height$p | `長さ, 百分率, または calc 式$ |
| `left$p | `長さ, 百分率, または calc 式$ |
| `letter-spacing$p | `長さ$ |
| `line-height$p | `実数$ または `長さ$ ◎ either number or length |
| `margin-bottom$p | `長さ$ |
| `margin-left$p | `長さ$ |
| `margin-right$p | `長さ$ |
| `margin-top$p | `長さ$ |
| `max-height$p | `長さ, 百分率, または calc 式$ |
| `max-width$p | `長さ, 百分率, または calc 式$ |
| `min-height$p | `長さ, 百分率, または calc 式$ |
| `min-width$p | `長さ, 百分率, または calc 式$ |
| `opacity$p | `実数$ |
| `outline-color$p | `色$ |
| `outline-width$p | `長さ$ |
| `padding-bottom$p | `長さ$ |
| `padding-left$p | `長さ$ |
| `padding-right$p | `長さ$ |
| `padding-top$p | `長さ$ |
| `right$p | `長さ, 百分率, または calc 式$ |
| `text-indent$p | `長さ, 百分率, または calc 式$ |
| `text-shadow$p | `影~list$ |
| `top$p | `長さ, 百分率, または calc 式$ |
| `vertical-align$p | `長さ$ |
| `visibility$p | `可視性$ |
| `width$p | `長さ, 百分率, または calc 式$ |
| `word-spacing$p | `長さ$ |
| `z-index$p | `整数$ |
9.2. SVG の~prop
SVG 仕様にて~animatableなものと定義されたすべての~propは、上に挙げた一連の~prop型に含まれている。 ◎ All properties defined as animatable in the SVG specification, provided they are one of the property types listed above.
10. 保安~上の考慮点
~INFORMATIVEこの仕様による保安~上の含意は限定的である — ~Web内容がこれまで行えなかったことを許容するものではないので。 むしろそれは、以前までは~scriptで行われていたものを宣言的に行えるようにして，実装が（ ~frame更新率, CPU 利用度において）最適化できる仕方を与える。 ◎ The security implications of this specification are limited because it doesn’t allow Web content to do things that it could not do before. Rather, it allows things that could previously be done with script to be done declaratively, and it ways that implementations can optimize (for frame rate and CPU usage).
実装が行える~~主要な最適化には、最新の~style~dataが必要にならない限り，~Web内容の~main~thread内で~styleや~layoutを更新することなく，ある種の高価な~prop（ `transform$p や `opacity$p など）の~animationを，~browserの組成器 ~thread／~process 上で稼働するように実装することが挙げられる。 この最適化には、~animateされている要素の内容を表示するために，~graphics~memoryの割り当てを要することが多い。 実装は、~Web内容が多数の~animationや 広い区画を覆うような要素~上の~animationを利用することにより，安全でない~memory不足の取扱いが誘発され得ないことを確保するよう注意を払うべきである（ここでの，多数／広い は、変形-前後の~sizeを通して定義し得るであろう）。 ◎ One of the major categories of optimizations that implementations can make is implementing animation of certain high-value properties (such as transform and opacity) run on a browser’s compositor thread or process without updating style or layout on the main Web content thread unless up-to-date style data are needed. This optimization often requires allocations of graphics memory to display the contents of the element being animated. Implementations should take care to ensure that Web content cannot trigger unsafe out-of-memory handling by using large numbers of animations or animations on elements covering large areas (where large may be defined in terms of pre-transform or post-transform size).
11. ~privacy上の考慮点
~INFORMATIVEこの仕様は~Web内容がこれまで行えなかったことを許容するものではないので、上述の保安と同様に，この仕様による~privacy上の考慮点も限定的になる。 ◎ As for security, the privacy considerations of this specification are limited because it does not allow Web content to do things that it could not do before.
この仕様は、利用者の ~hardware／~software の特徴を決定し易くし得るような追加の仕組みを供する。 しかしながら、利用者の ~hardware／~software の処理能に関する特徴を決定する能は，多くの~Web技術に共通してある。 この仕様は、新たな能力を導入するものではない。 ◎ This specification may provide additional mechanisms that help to determine characteristics of the user’s hardware or software. However, ability to determine performance characteristics of the user’s hardware or software is common to many Web technologies, and this specification does not introduce new capabilities.
~accessibility上の考慮点 節に述べるように、実装は，障碍を有する利用者を補助する軽減策を供してよい。 これらの軽減策は，~Web内容から検出-可能になる~~可能性が高いため、恩恵を得る利用者は，自身の障碍を~Web内容から~privateに保つことと, 軽減策からの恩恵を受けることとの引き換えに直面し得ることになる。 ◎ As described in §12 Accessibility Considerations, implementations may provide mitigations to help users with disabilities. These mitigations are likely to be detectable by Web content, which means that users who would benefit from these mitigations may face a tradeoff between keeping their disability private from the Web content or benefiting from the mitigation.
12. ~accessibilityに関する考慮点
~INFORMATIVE12.1. ~motion
この仕様は、以前までは~scriptを利用して行う必要があった~animation用に，宣言的な仕組みを供する。 そうすることには、複数の効果がある： それは、そのような~animationをより作り易くする結果，更に~~普及させるであろう。 一方で、~UAにとっても，利用者の~accessibilityの必要性を満たすために必要なだけ~animationを改変することがより容易くなる。 ◎ This specification provides declarative mechanisms for animations that previously needed to be done using script. Providing a declarative mechanism has multiple effects: it makes such animations easier to make and thus likely to be more common, but it also makes it easier for user agents to modify those animations if such modifications are needed to meet a user’s accessibility needs.
したがって、動きに過敏な利用者や, 内容を読んだり理解するのにより時間を要する利用者は、~animationを不能化したり低速化できるような ~UA特色機能から，恩恵を得られるようになるであろう。 （ただし、そのような軽減策による~privacy上の含意もある — ~privacy上の考慮点節を見よ。） ◎ Thus, users who are sensitive to movement, or who require additional time to read or understand content, may benefit from user agent features that allow animations to be disabled or slowed down. (But see §11 Privacy Considerations for information on the privacy implications of such mitigations.)
~UAの実装者は、~Web内容は`遷移~event$の発火に依存し得るので、そのような軽減策の実装は，遷移が~animationとして継続的に稼働していなくとも，遷移~eventを発火しようと望むことがあるのに留意するべきである。 しかしながら、そのような~eventに依存しないと正しく~~機能しないような~Web内容は、おそらく拙い実践である。 ◎ User agent implementors should be aware that Web content may depend on the firing of transition events, so implementations of such mitigations may wish to fire transition events even if the transitions were not run as continuous animations. However, it is probably poor practice for Web content to depend on such events to function correctly.
12.2. ~cascade
~CSS`~cascade$は、必要がある利用者が 作者~styleとやりとりできるようにするための，~CSSにおける一般的な仕組みである。 この仕様は，~cascadeと相互作用するが、許容するのは，既存の~cascade規則による結果の各~値の間における~animationに限られるので、利用者が~CSS~propを特定0の値に強制することに対し干渉することはない。 ◎ The CSS cascade is a general mechanism in CSS that allows user needs to interact with author styles. This specification interacts with the cascade, but since it only allows animation between values that result from the existing cascade rules, it does not interfere with the user’s ability to force CSS properties to have particular values.
利用者はまた、~cascadeを利用して遷移~propを上書きすることで，遷移をまるごと不能化することもできる。 ◎ The cascade also allows users to disable transitions entirely by overriding the transition properties.
13. 2013 年 11 月 19 日付 作業草案 からの変更点
2013 年 11 月 19 日付 作業草案: からの主要な変更点は： ◎ The following are the substantive changes made since the Working Draft dated 19 November 2013:
- 補間できない値は、遷移を稼働させず即時に変化させるのでなく，計時~関数がその半分を過ぎた時点で遷移することにされた。 ◎ Values that cannot be interpolated are transitioned when the timing function crosses its midpoint, instead of not running transitions and changing immediately.
- `稼働中の遷移$の取消と中断が，ずっと精確に定義された。 これには、CSS Transitionsからの~styleは最早~含まないことも含まれる。 ◎ Canceling and interrupting of running transitions is defined much more precisely. This includes the after-change style no longer including styles from CSS Transitions.
- 遷移の完了が，いくぶん精確に定義された。 ◎ Completion of transitions is defined somewhat more precisely.
- `transitionend$et ~eventは，最早 取消~可能でなくされた。 それは、既定~動作を持たず，取消す意味がないので。 また、この方が~CSS~animation~eventにも合致する。 ◎ The transitionend event is no longer cancelable. This is since it has no default action, so canceling it would have no meaning. It also matches the animation events.
- `transitionrun$et, `transitionstart$et, `transitioncancel$et ~eventが追加された。 ◎ The transitionrun, transitionstart, and transitioncancel events have been added.
- `影~list$上の `inset$v 値の補間は、最早 backwards【後方互換？】でない。 ◎ The interpolation of inset values on shadow lists is no longer backwards.
- 次の各~節を追加した： 適合性, 保安~上の考慮点, ~privacy上の考慮点, ~accessibilityに関する考慮点, ~IDL索引 ◎ A Conformance section, §10 Security Considerations section, §11 Privacy Considerations section, §12 Accessibility Considerations section, and IDL Index have been added
- `transition-property$p に受容される識別子は、 `custom-ident$t を通して定義された。 ◎ The identifiers accepted by transition-property are defined in terms of <custom-ident>.
- 算出値の変化が起きたときについて、実装は、少なくとも実際に算出値を更新するまでは，算出値による効果を更新してはならないとするように、より詳しく定義した。 ◎ Define a little bit more about when changes to computed values happen, by saying at least that implementations must not update the effects of computed values without actually updating computed values.
これらの変更点についての詳細は、二つに分けられた version control 変更ログに見られる： 2015 年 1月 26日 以降のログ, 2013 年 3月 28日 〜 2015年 1月 26日 のログ ◎ For more details on these changes, see the version control change log since 2015 January 26 and the change log from 2013 March 28 to 2015 January 26.
以前の作業草案からの変更点： ◎ For changes in earlier working drafts:
- 2013 年 11 月 19 日付 作業草案の変更点の節 を見よ。 ◎ see the changes section in the 19 November 2013 Working Draft
- 以前の作業草案からの変更点のログ ◎ see the the ChangeLog for changes in previous working drafts
- これらの変更点についての詳細は、三つに分けられた変更ログにて見られる： 2015年 1月 26日 以降のログ, 2013年 3月 28日 〜 2015年 1月 26日のログ, 2013年 3月 28日 より前のログ ◎ For more details on these changes, see the version control change logs, which are split in three parts because of file renaming: change log since 2015 January 26, change log from 2013 March 28 to 2015 January 26, change log before 2013 March 28.