CSS 遷移 2 — CSS Transitions Level 2

`~level 1$ の § `transition-property^p ~prop からの~textを挿入して， 以下の段落を~portし戻す。 ◎ Insert text from CSS Transitions § 2.1 The transition-property Property and backport the following paragraph.

`transition-property$p には，`略式~prop$や `all$v ~keywordも指定できるが、 個々の遷移は，各`遷移-可能$な~~末端の`下位prop$に対し生成される。 遷移の `展開された遷移~prop名@ は、 それ用に遷移を生成した~~末端の下位propの名前である （例： `border-left-width$p ）。 ◎ Although the transition-property may specify shorthand properties and the all keyword, individual transitions are generated for each longhand sub-property that is transitionable. The expanded transition property name of a transition is the name of the longhand sub-property for which the transition was generated (e.g. border-left-width).

`遷移-可能$を定義している各~instanceを更新する — それが `~level 1$ から~portされたなら。 ◎ Update the defining instance of transitionable once it is ported from Level 1.

注記： `離散的$である場合、 値が遷移するときには， 50% 進捗した所で切り替わる。 ◎ Note: When values with a discrete animation type are transitioned, they flip at 50% progress.

2.2. `transition-duration^p ~prop

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

2.3. `transition-timing-function^p ~prop

`transition-timing-function$p ~propは、 当の遷移に`結付けられた効果$の`~easing関数$を指定する （`§ ~easing（効果~計時の変形n）＠~WANIM#time-transformations$ `WEB-ANIMATIONS$r を見よ）。 ◎ The transition-timing-function property specifies the timing function of the transition’s associated animation effect (see Web Animations § 4.6.11 Easing (effect timing transformations)).

注記： ~CSS~animationと違って，~CSS遷移~用の計時~関数は、 個々の~keyframeではなく，~animation効果に適用される。 これにより，計時~関数は`変形d進捗$に反映され、 `逆再生 時短係数$を計算するとき利用されるようになる。 ◎ Note: Unlike CSS animations, the timing function for CSS transitions applies to the animation effect as opposed to the individual keyframes since this allows it to be reflected in the transformed progress as used when calculating the reversing shortening factor.

2.4. `transition-delay^p ~prop

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

2.5. `transition-behavior^p ~prop

`transition-behavior$p ~propは、 離散的な~prop用にも遷移が開始されるか否かを指定する。 ◎ The transition-behavior property specifies whether transitions will be started or not for discrete properties.

`transition-behavior$p を指定するための構文は、 次に従う： ◎ The syntax for specifying transition-behavior is as follows:

`transition-behavior-value@t
	= `normal^v
	| `allow-discrete^v

【 %N 個目の値に】 `normal^v が指定されたときは、 【 %N 個目の】遷移は，離散的な~prop用には開始されない — 補間-可能な~propに限られる。 ◎ When normal is specified, transitions will not be started for discrete properties, only for interpolable properties.＼

【 %N 個目の値に】`allow-discrete^v が指定されたときは、 【 %N 個目の】遷移は，離散的な~prop用にも開始される — 補間-可能な~propのみならず。 ◎ When allow-discrete is specified, transitions will be started for discrete properties as well as interpolable properties.

2.6. `transition^p 略式 ~prop

`transition$p `略式~prop$を成す各~itemを指定するための構文は、 次に従う【よう拡張される】： ◎ The syntax for specifying an item in the transition shorthand is as follows:

`single-transition@t
	= [ `none$v | `single-transition-property$t ]
	|| `time$t
	|| `easing-function$t
	|| `time$t
	|| `transition-behavior-value$t

3.1. 中断された遷移の速やかな逆再生

逆再生する挙動を正しく生産するため，各~遷移には［ `逆再生 時短係数$, `逆再生調整後の開始-値$ ］が結付けられるが、 これらは — 遷移~自身のみならず，例えば — 遷移に`結付けられた効果$にも結付けられる。 その結果として — ~WAnim~APIを利用して，遷移に`結付けられた効果$が更新されたり置換されようが — 遷移が逆再生される遷移を生産するときには、 同じこれらの値を利用することになる。 `WEB-ANIMATIONS$r ◎ The reversing shortening factor and reversing-adjusted start value associated with a transition in order to produce correct reverse behavior, are associated with the transition itself and not, for example, its animation effect. As a result, transitions will use these same values when producing a reversed transition, even if the transition’s associated animation effect has been updated or replaced using the Web Animations API [WEB-ANIMATIONS].

3.2. 現在の遷移の生成

各 `~top-level閲覧~文脈$には， `現在の遷移~生成回@ が結付けられ、 各`~style変化~event$ごとに増分される。 ◎ Associated with each top-level browsing context is a current transition generation that is incremented on each style change event.

新たな遷移が生成される各回ごとに、 `現在の遷移~生成回$の（増分-後の）現在の値は，その遷移の `遷移~生成回@ として格納される。 ◎ Each time a new transition is generated, the current value of the (already incremented) current transition generation is stored as the transition’s transition generation.

3.3. 変化-前~styleの定義-法： `starting-style$at 規則

`~level 1$ においては、 要素に対し遷移を開始し得るのは，`~style変化~event$の間, かつ［ 当の要素~用に［ 前回の`~style変化~event$により確立された`変化-前~style$ ］が定義される場合 ］に限られていた。 すなわち、［ 前回の`~style変化~event$の時点では，具現化されていなかった要素 ］に対しては，遷移は開始し得なかった （ `~level 1$ の `§ 遷移の開始-法＠~TRANSITION#starting$ を見よ）。 ◎ In Level 1 of this specification, transitions can only start during a style change event for elements which have a defined before-change style established by the previous style change event. That means a transition could not be started on an element that was not being rendered for the previous style change event (see: CSS Transitions § 3 Starting of transitions).

一部の事例では、［ 新たに挿入された要素／ `具現化され$ていなかったが具現化されるよう変化した要素 ］に対し，遷移を開始することもイミを成す。 それを許容するため、 この仕様は， `starting-style$at を導入する。 ◎ In some cases it makes sense to start transitions on newly inserted elements or elements that change from not being rendered to being rendered. To allow for that, this specification introduces @starting-style.

`starting-style@at 規則は、 ~group化~規則である。 その内側にある~style規則は、 前回の`~style変化~event$が［ ~styleが算出されている要素~用の`変化-前~style$ ］を確立していなかった場合に，それに代わる遷移~用の~styleを確立するために利用される。 ◎ The @starting-style rule is a grouping rule. The style rules inside it are used to establish styles to transition from, if the previous style change event did not establish a before-change style for the element whose styles are being computed.

注記： このことは、 `starting-style$at 規則は，前回の`~style変化~event$の間に［ 具現化されていなかった要素／ ~DOMの一部を成していなかった要素 ］に限り — 要素~用に算出される~styleを更新する間に — 適用されることを意味する。 ◎ Note: This means that @starting-style rules only apply to some elements during a computed style update, namely elements that were not rendered or part of the DOM during the previous style change event.

要素~用の `開始-時の~style@ は、［ `変化-後~style$に `starting-style$at 規則を追加で適用した結果 ］として定義される。 `~style変化~event$の時点で要素~用の`変化-前~style$が無い場合、 ［ `変化-後~style$と比較する~style ］として［ `変化-前~style$の代わりに，`開始-時の~style$ ］を利用して，遷移を開始する （`~level 1$ の `§ 遷移の開始-法＠~TRANSITION#starting$）。 ◎ Define starting style for an element as the after-change style with @starting-style rules applied in addition. If an element does not have a before-change style for a given style change event, the starting style is used instead of the before-change style to compare with the after-change style to start transitions (CSS Transitions § 3 Starting of transitions).

`starting-style$at の内側にある規則は、 他の~group化される~style規則と同じく， ~cascadeに対し新たな順序付けを導入することなく~cascadeする。 すなわち、 `starting-style$at の内側にある規則は，外側にある規則より優先されるとは限らない。 ◎ The rules inside @starting-style cascade as any other grouped style rules without introducing any new ordering to the cascade, which means rules inside @starting-style do not necessarily win over those outside.

`starting-style$at 内の~style規則は、 `変化-後~style$には適用されない。 したがって， `starting-style$at 内に合致している規則が在る場合、［ `変化-前~style$を欠如していたため，他では遷移し得なかった要素 ］に対し，遷移を生じさせ得る。 ◎ Style rules in @starting-style do not apply to after-change style. Thus, the presence of matching rules in @starting-style can cause transitions to occur on elements that otherwise could not have transitions because they lack a before-change style.

`開始-時の~style$は、 `変化-後~style$とちょうど同じ様に，親の`変化-後~style$を継承する。 ◎ Starting style inherits from the parent’s after-change style just like after-change style does.

h1 {
  transition: background-color 1.5s;
  background-color: green;
}
@starting-style {
  h1 {
    background-color: transparent;
  }
}

h1 {
  transition: background-color 1.5s;
  background-color: green;
  @starting-style {
    background-color: transparent;
  }
}

#target {
  transition-property: opacity, display;
  transition-duration: 0.5s;
  display: block;
  opacity: 1;
  @starting-style {
    opacity: 0;
  }
}
#target.hidden {
  display: none;
  opacity: 0;
}

大域的な名前を定義している~at-規則 — `keyframes$at, `font-face$at, `layer$at など — は、 `starting-style$at の内側でも許容される — 在る場合、 当の `starting-style$at の外側に在ったかのように挙動する。 ◎ Global, name-defining at-rules such as @keyframes, @font-face, and @layer are allowed inside @starting-style, and when present behave as if they were outside of @starting-style.

[`Exposed$=Window]
interface `CSSStartingStyleRule@I : `CSSGroupingRule$I {
};

4.1. ~animationの組成-順序

この仕様が定義する~markup【すなわち，~CSS遷移~prop宣言】から生成された`~animation$が属する`~animation~class$は、 `~CSS遷移^i（ `CSS Transition^en ）とする。 ◎ Animations generated from the markup defined in this specification have an animation class of ‘CSS Transition’.

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

~CSS遷移の`組成-順序$は、［ `~CSS~animation^i ／ 特定の`~animation~class$に属さない~animation ］より前とする。 ◎ CSS Transitions have an earlier composite order that CSS Animations and animations without a specific animation class.

~CSS遷移どうしの`組成-順序$は、 次に従って~sortする： ◎ Within the set of CSS Transitions, two animations A and B are sorted in composite order (first to last) as follows:

1. `所有している要素$が無いものどうしは、 `大域~animation~list$内における順序に従う。 ◎ If neither A nor B has an owning element, sort based on their relative position in the global animation list.
2. `所有している要素$が在るものは無いものより前に~sortする。 ◎ Otherwise, if only one of A or B has an owning element, let the animation with an owning element sort first.
3. `所有している要素$が在って互いに相違するものどうしは、 `所有している要素$の`~tree順序$に従う。 この~tree順序においては、 同じ`出自の要素$ %要素 を~~共有する疑似要素は， 次に挙げる順に~sortする ⇒＃ %要素, `marker^pe, `before^pe, ここでは特定的に言及されない他の疑似要素 — ~Unicode符号位置の昇順で, `after^pe, %要素 の子 ◎ Otherwise, if the owning element of A and B differs, sort A and B by tree order of their corresponding owning elements. With regard to pseudo-elements, the sort order is as follows: • element • ::marker • ::before • any other pseudo-elements not mentioned specifically in this list, sorted in ascending order by the Unicode codepoints that make up each selector • ::after • element children

4. `所有している要素$が同じものどうしは： ◎ ↓

   1. 各自の`遷移~生成回$の昇順に~sortする。 ◎ Otherwise, if A and B have different transition generation values, sort by their corresponding transition generation in ascending order.
   2. `遷移~生成回$も同じものどうしは、 各`展開された遷移~prop名$を成す~Unicode符号位置により，昇順に~sortする （すなわち、 文字大小変換を試みることなく， `-moz-column-width^p などは `column-width^p より前に~sortする）。 ◎ Otherwise, sort A and B in ascending order by the Unicode codepoints that make up the expanded transition property name of each transition (i.e. without attempting case conversion and such that ‘-moz-column-width’ sorts before ‘column-width’).

ただし、 遷移~eventどうしを~sortするために`組成-順序$を決定する目的においては ⇒ 2 つの遷移~eventどちらかは `transitioncancel$et ~eventである所では、 遷移を取消す直前に設定された［ `所有している要素$, `遷移~生成回$ ］を利用して~sortするとする。 ◎ When determining the composite order in order to sort transition events where either or both of the events is a transitioncancel event, use the owning element and transition generation that were set immediately prior to cancelling the transition.

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

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

4.2. ~animationの~cascade~level

`~animation~class$ `~CSS遷移^i （ `‘CSS Transition’^en ）に属する~animationのうち，`所有している要素$が在るものは、 ~CSS~cascadeの “遷移~宣言” ~levelに適用される【`~cascade出自$を見よ】。 この仕様が定義する~markupにより生成される他のすべての~animationは、 `所有している要素$が無い（無くなった）ものも含め， ~cascadeの “~animation宣言” ~levelに適用される。 （`§ 組成された結果の適用-法＠~WANIM#applying-the-composited-result$ `WEB-ANIMATIONS$r を見よ）。 ◎ Animations with an animation class of ‘CSS Transition’ that have an owning element are applied to the ‘Transitions declaration’ level of the CSS cascade. All other animations generated by the markup defined in this specification, including animations that no longer have an owning element, are applied to the ‘Animation declarations’ level of the cascade. (See Web Animations § 5.4.5 Applying the composited result.)

5.1. ~eventの配送-法

注記： ~WAnim~API `WEB-ANIMATIONS$r を利用して~animationが［ ~seekされる／逆再生される ］可能性を織り込むため、 この節の記述は，`~level 1$ による~event配送-法より一般的である。 さらには、 ~WAnimを利用して，遷移~効果を［ 通常は遷移と伴には利用されない~prop ］を伴う まったく異なる効果で代用することもアリである （例：複数回~繰返す効果）。 よって，この節は、 ~WAnim~modelの全部的な複階性を織り込む汎用な定義を供する。 ◎ Note, this is a more general description of event dispatch than that of CSS Transitions Level 1 [CSS-TRANSITIONS-1] since it must account for the possibility of animations being seeked or reversed using the Web Animations API [WEB-ANIMATIONS]. Furthermore, it is possible using the Web Animations API to substitute the transition effect with an entirely different effect with properties not normally used with transitions (e.g. an effect that repeats multiple times) and hence this section provides a generic definition that accounts for the full complexity of the Web Animations model.

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

冗長な~eventの発火を避けるため、 前回の`~animation~frame$における遷移の`遷移~相$を現在のそれと比較すること基づいて，一連の~eventを配送する。 ◎ To avoid firing redundant events, the set of events to dispatch is based on comparing the phase of the transition in the previous animation frame to its current state.

各~遷移 %遷移 の `遷移~相@ は、 初期~時は `遊休~相^i とする。 それは、 各`~animation~frame$ごとに，次に従って更新される： ◎ The transition phase of a transition is initially ‘idle’ and is updated on each animation frame according to the first matching condition from below:

1. ~IF［ %遷移 に`結付けられた効果$ ~EQ ~NULL ］： ◎ If the transition has no associated effect, • The transition phase is set according to the first matching condition from below:

   1. ~IF［ %遷移 の`現-時刻$ ~EQ `未解決$ ］ ⇒ ~RET `遊休~相^i ◎ If the transition has an unresolved current time, • The transition phase is ‘idle’.
   2. ~IF［ %遷移 の`現-時刻$ ~LT 0 ］ ⇒ ~RET `事前~相^i ◎ If the transition has a current time < 0, • The transition phase is ‘before’.
   3. ~RET `事後~相^i ◎ Otherwise, • The transition phase is ‘after’.
2. ~IF［［ %遷移 の`処理待ち再生-~task$ ~NEQ ε ］~OR［ %遷移 の`処理待ち静止-~task$ ~NEQ ε ］］~AND［ 前回の`~animation~frame$における`遷移~相$ ~IN { `遊休~相^i, `処理待ち^i } ］ ⇒ ~RET `処理待ち^i ◎ If the transition has a pending play task or a pending pause task and its phase was previously ‘idle’ or ‘pending’, • The transition phase is ‘pending’.
3. ~RET `結付けられた効果$の`相＠~WANIM#animation-effect-phases-and-states$ ◎ Otherwise, • The transition phase is the phase of its associated effect.

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

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

上の公式における遷移の［ `開始-遅延$, `作動~所要時間$, `現在の反復~index$, `反復~始端$, `反復~所要時間$ ］は、 当の遷移に`結付けられた効果$の各種~propを指すものと解するベキである。 ◎ In the above formulae, references to the start delay, active duration, current iteration, iteration start, and iteration duration of a transition should be understood to refer to the corresponding properties of the transition’s associated effect.

新たな`~animation~frame$が確立される各回にて配送する~event【, およびその`経過d時間$】は、［ 前回の~animation~frame, 現在の~animation~frame ］における`遷移~相$を次に従って比較することにより決定される： ◎ Each time a new animation frame is established, the events to dispatch are determined by comparing the transition phase in the previous and current animation frame as follows:

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

6.1. `CSSTransition^I ~interface

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

`transitionProperty@m ◎ transitionProperty, of type CSSOMString, readonly

この遷移の`展開された遷移~prop名$。 ◎ The expanded transition property name of this transition.

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

%elem.style.transition = 'opacity 100s';
%elem.style.opacity = '0';
window.getComputedStyle(%elem).opacity; // 0
%elem.style.opacity = '1';
%elem.getAnimations()[0].transitionProperty // 'opacity'