CSS 遷移効果 — CSS Transitions Level 1

1. 序論

この文書は、 `暗黙的な遷移^emを可能化する，新たな~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^en ）な遷移 — ~propの値を能動的／明示的（ `explicit^en ）に変化させる~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 gradual 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の`算出d値$は、 【`指定d値$の変化に応じて】 古い値から新たな値へ時間~越しに遷移する。 したがって、 遷移-中における~propに対し，~scriptから`算出d値$ （または，それに依存する他の~data）が~queryされたときは、 ~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.

~propの遷移は、 いくつかの新たな~propを利用して定義される。 例えば： ◎ The transition for a property is defined using a number of new properties. For example:

div {
  transition-property: opacity;
  transition-duration: 2s;
}

各種 遷移~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;
}

一連の遷移~propに与えられた値の個数が不揃いの場合、 `transition-property$p の値の個数（ %n とする）が， 遷移の開始-時における 他の遷移~propの値の個数を決定する。 互いの値~listは，先頭の値から互いに関連付けられ、 %n を超える部分の値は，利用されない。 【！ enough comma-separated values to match】 値の個数が %n に満たない遷移~propに対しては、 ~UAは，その~propに与えられた値~listを，値の個数が十分になるまで繰返すことにより、 その`使用~値$を算定するモノトスル。 この［ 切捨て／繰返n ］は、 `算出d値$には影響しない。 注記： これは `background-*^p ~propの挙動に相似する （ `background-image$p が `transition-property$p の役割に相似する）。 【`~~参照＠~CSSBG#layering$】 ◎ 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 user agent 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;
}

遷移は，内容を動的に変化させるので、 一部の利用者を光過敏性発作（ `seizure^en ）に至らす可能性がある。 光過敏性発作を至らせ得る内容を避ける方法については `指針 2.3 : 光過敏性発作に至らさないよう内容を設計すること＠https://www.w3.org/TR/WCAG20/#seizure$ (`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]).

`single-transition-property@t
	= `all$v
	| `custom-ident$t

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

3. 遷移の開始-法

実装は、 `完了した遷移@ たちが成す集合 — 以下では “完了した遷移~群” と称される — も保守するモノトスル。 この集合に属する各~遷移は、 （`稼働中の遷移$と同様に）特定の［ 要素, 略式でない~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.＼

【 `稼働中の遷移$は、 `完了-$した時点で`完了した遷移~群$へ移動される。 】

注記： この仕様は、 同じ［ ( ~prop, 要素 ) が成す組 ］に対し，［ `稼働中の遷移$と`完了した遷移$が同時に~~存在することは，決してない ］とする不変則を保守する。 ◎ This specification maintains the invariant that there is never both a running transition and a completed transition for the same property and element.

要素が文書~内から除かれたときは、 実装は，［ `稼働中の遷移$／`完了した遷移$ ］のうち要素~上の遷移すべてを、 `取消した$上で, 除去するモノトスル。 ◎ 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.

実装は、 ~CSSによる［ ~cascade法, 値の算出, 継承~処理n ］ `CSS3CASCADE$r の結果による何かを， `算出d値$を更新することなく［ 利用-／呈示-／表示- ］してはならない — この仕様は、 `算出d値$がいつ更新されるかについて，このこと以上の要件は定義しない （すなわち，実装は、［ 単に，~style変化の取扱いの一部として`算出d値$を更新していないと主張する ］ことで，この仕様の要件を満たすことになる）。 ◎ 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の`算出d値$を更新するとき／ 文書に新たに追加された要素~上の~propの`算出d値$を算出するとき ］には、 これらの変化すべてを反映するよう， すべての要素~上の`算出d値$を同時に （あるいは少なくとも，同時でないことが検出され得ない様に） 更新するモノトスル。 この［ 同時的~style変化の処理 ］は、 `~style変化~event@ と呼ばれる。 （実装は、 概して，`~style変化~event$を［ 欲される~screenの更新頻度 ］あるいは［ 変化に依存する~script~API用に`算出d値$／ ~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$が いつ生じるか ］について定義しないので，［ `算出d値$に対するどの変化が 同時的と見なされるか ］も定義しない。 作者は、［ 遷移を生じさせ得る変化から微小な時間~後の，遷移~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で変化した`算出d値$に基づいて，`遷移を開始-$させるモノトスル。 ［ この`~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. Otherwise,＼

• `変化前~style@ ⇒ 前回の`~style変化~event$による`算出d値$として定義される。 ◎ define the before-change style as the computed values of all properties on the element as of the previous style change event,＼

  ただし、［ `CSS Transitions^cite, `CSS Animations^cite `CSS3-ANIMATIONS$r, `SMIL Animations^cite `SMIL-ANIMATION$r, `SVG11$r) ］などの宣言的~animationから導出され， 現在-時刻に更新された~styleは除く。 ◎ except with any styles derived from declarative animations such as CSS Transitions, CSS Animations ([CSS3-ANIMATIONS]), and SMIL Animations ([SMIL-ANIMATION], [SVG11]) updated to the current time.＼

• `変化後~style@ ⇒ `~style変化~event$の開始-時にて既知な情報に基づく，`算出d値$として定義される。

  ただし，その算出においては：

  • `変化前~style$における，各種 `animation-*$p ~propの算出d値を利用する。
  • CSS Transitions からの~styleは、 除外する。
  • 親の`変化後~style$からの継承ngは、 含める。
  ◎ Likewise, define the after-change style as the computed values of all properties on the element based on the information known at the start of that style change event, but using the computed values of the animation-* properties from the before-change style, excluding any styles from CSS Transitions in the computation, and inheriting from the after-change style of the parent.＼

上述は、 次を意味することに注意 ⇒ ~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$, `変化後~style$ ］を伴う各 %要素, および %要素 上の（`略式~prop$でない【かつ`~animate不可$でない】）各 %~prop に対しては、 次が定義される： ◎ For each element with a before-change style and an after-change style, and each property (other than shorthands),＼

• `合致する~transition-property値@ は、［ %要素 の`変化後~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,＼

  • ［ `所要時間@V, `遅延@V, `計時~関数@V ］は、 `変化後~style$における［ `transition-duration$p, `transition-delay$p, `transition-timing-function$p ］（同順）の値を成す，対応する~~成分~値で与えられる （`値の~listの対応~付け規則＠#list-matching$を見よ）。 ◎ 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^op( `所要時間$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.＼

• %~prop 用の所与の 2 つの値［ %始~値, %終~値 ］は、 %~prop の`~animation型$が［ `~animate不可$でも`離散的$でもない ］とき，【そのときに限り】 %始~値 から %終~値 へ `遷移-可能@ とされる。 ◎ When comparing the before-change style and after-change style for a given property, the property values are transitionable if they have an animation type that is neither not animatable nor discrete.

  注記： ある~propの`~animation型$が【定義~表tの中で】`離散的$でないものと定義されていても、 その~prop用の特定0の値~pairに対する~animation型は，`離散的$になり得る。 例えば， `box-shadow$p ~propの~animation型は `影~list＠~WANIM#combining-shadow-lists$であり、 一方の値に `inset$v ~keywordは在って他方には無い場合には， 離散的な~animationを利用するものと定義されている。 その結果、 `0px 0px black^v から `inset 10px 10px black^v へは`遷移-可能$でない。 ◎ Note: Even if a property is defined to have an animation type that is not discrete, for a particular pair of property values the animation type may be discrete. For example, the animation type of the box-shadow property is shadow list, which defines that when the inset keyword is absent in one value but present in the other, discrete animation is used. As a result 0px 0px black and inset 10px 10px black are not transitionable.

• 以下における［ %変化前~値, %変化後~値 ］は、 順に， %要素 の［ `変化前~style$, `変化後~style$ ］における %~prop の値とする。 ◎ ↓

• 次に挙げる各 条件は、 以下から参照される：

  • `稼働中^cd： %要素 上の %~prop に対する`稼働中の遷移$がある
  • `稼働中+^cd： `稼働中^cd ~AND［ その遷移の`終止~値$ ~NEQ %変化後~値 ］
  • `完了-^cd： %要素 上の %~prop に対する`完了した遷移$がある （ `稼働中^cd と排他的）
  • `完了-+^cd： `完了-^cd ~AND［ その遷移の`終止~値$ ~NEQ %変化後~値 ］
  • `合致^cd： `合致する~transition-property値$がある
  • `合致+^cd： `合致^cd ~AND［ `合計の所要時間$ ~GT `0s^v ］
  • `遷移~可^cd： `合致+^cd ~AND［ %変化前~値 ~NEQ %変化後~値 ］~AND［ %変化前~値 から %変化後~値 へは`遷移-可能$である ］

  条件に “~NOT” が接頭された場合、 否定を表す。

  【 これらの条件は、 この訳により，原文の以降の記述を整理集約したものである。 】

  ◎ ＼

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
 */
}

注記： ~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の算出d値が変化するときには， （~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.

4. 遷移の適用

要素~上の~propにて，遷移が進行中な間 （すなわち，遷移が開始 以後から その`終止~時刻$前まで）、 その遷移により，~CSS~cascadeの［ `CSS3CASCADE$r にて定義される `CSS Transitions 用の~level＠~CASCADE#cascading-origins$ ］に `現在-値@ と呼ばれる~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遷移の結果による`算出d値$が、 他の算出d値と同様に，子孫にも継承されることを意味する。 通常の事例では、 継承d~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に取り込むモノトスル。 ◎ 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 expose whether transitions are running (such as transition events) still report that a transition is running.

現在-時刻が遷移の`開始~時刻$より前である場合 （すなわち，現在-時刻は遷移の`遅延$ 相）、 この`現在-値$は，［ 遷移の`開始~値$に算出されることになる，指定d~style 【 specified style — `指定d値$】 ］である。 ◎ 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.

現在-時刻が遷移の`開始~時刻$より後である場合 （すなわち，現在-時刻は遷移の`所要時間$ 相）、 `現在-値$は，指定d~styleであり，次に与える値を利用して~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 following values:

• 値A ~SET 遷移の`開始~値$ ◎ Va: start value of the transition
• 値B ~SET 遷移の`終止~値$ ◎ Vb: end value of the transition
• %p ~SET ( 現在-時刻 ~MINUS 開始~時刻 ) ~DIV ( 終止~時刻 ~MINUS 開始~時刻 ) ◎ p: the output of the timing function for input ()

`補間$に利用される特定の手続-は、 当の~propの`~animation型$により定義される。 ◎ The specific interpolation procedure to be used is defined by the property’s animation type.

5. 遷移の完了

`稼働中の遷移$は、 その`終止~時刻$以降のある時点に, かつ `終止~時刻$以降の最初の`~style変化~event$より早い時点に `完了-@ する。 遷移が完了するとき，実装は、 その時点に完了した すべての遷移を，`稼働中の遷移~群$から`完了した遷移~群$へ移動してから、 それらの完了に対し`遷移~event$を発火するモノトスル。 （注記： そうしなければ — すなわち、 遷移すべてが移動される前に，いずれかの完了に対し~eventが発火された場合 — それ用の~event~handlerが最新の［ 算出d~style／~layout~data ］を要請した場合、 必要な遷移が完了する前に，`~style変化~event$が起こり得るので。 ） ◎ Running transitions complete at a time that is equal to or after their end time, but prior 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]
interface `TransitionEvent@I : `Event$I {
  `constructor＠#dom-transitionevent-transitionevent$(`CSSOMString$ %type, optional `TransitionEventInit$I %transitionEventInitDict = {});
  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 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^op( `max^op( ~MINUS `transition-delay$p , 0), `transition-duration$p ) に等しくなる（ `transition-delay$p が負でなければ 0 ）。 ◎ 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

◎ Bubbles: Yes ◎ Cancelable: No ◎ Context Info: propertyName, elapsedTime, pseudoElement

`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

◎ Bubbles: Yes ◎ Cancelable: No ◎ Context Info: propertyName, elapsedTime, pseudoElement

`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

◎ Bubbles: Yes ◎ Cancelable: No ◎ Context Info: propertyName, elapsedTime, pseudoElement

`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 は 0 になる。 ◎ 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

◎ Bubbles: Yes ◎ Cancelable: No ◎ Context Info: propertyName, elapsedTime, pseudoElement

6.3. 要素および `Document^I ／ `Window^I ~obj上の~event~handler

7. ~DOM~interface

この仕様は、 `遷移~event$用に`~event~handler~IDL属性$を追加して， ~HTMLの `GlobalEventHandlers$I ~interface~mixinを拡張する — § 要素および `Document^I ／ `Window^I ~obj上の~event~handler に定義されるとおり。 ◎ This specification extends the GlobalEventHandlers interface mixin 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.

partial interface mixin `GlobalEventHandlers$I {
  attribute `EventHandler$I `ontransitionrun@m;
  attribute `EventHandler$I `ontransitionstart@m;
  attribute `EventHandler$I `ontransitionend@m;
  attribute `EventHandler$I `ontransitioncancel@m;
};

8. ~securityの考慮点

この仕様による~securityの含意は限定的である — ~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).

9. ~privacyの考慮点

この仕様は~Web内容がこれまで行えなかったことを許容するものではないので、 上述の~securityと同様に，この仕様による~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の考慮点＠#accessibility$にて述べるとおり、 実装は，障碍を有する利用者を補助する軽減策を供してもヨイ。 これらの軽減策は，~Web内容から検出-可能になる見込みが高いので、 便益を得ることになる利用者は，［ 自身の障碍を~Web内容から~privateに保つこと ］と［ 軽減策から便益を得ること ］の~tradeoffに直面し得ることになる。 ◎ As described in § 10 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.

10. ~accessibilityの考慮点

11. 変更点

`2018年 10月 11日 作業草案＠~TR/2018/WD-css-transitions-1-20181011/$ からの~~主要な変更点 ◎ 11.1. Changes since Working Draft of 11 October 2018 ◎ The following are the substantive changes made since the Working Draft dated 11 October 2018:

（まだ未更新。） これらの変更点についての詳細は、 ~version~control `変更~log＠https://github.com/w3c/csswg-drafts/commits/main/css-transitions-1/Overview.bs$ を見よ。 ◎ (Not up to date) ◎ For more details on these changes, see the version control change log.

以前の変更点 ◎ 11.2. Earlier changes

以前の作業草案からの変更点については、 次に挙げるものを見よ ⇒＃ `§ 2018年 11月 10日 作業草案の § 変更点＠~TR/2018/WD-css-transitions-1-20181011/#changes/#changes$, `§ 2017年 11月 30日 作業草案の § 変更点＠~TR/2017/WD-css-transitions-1-20171130/#changes$, `§ 2013年 11月 19日 作業草案の § 変更点＠~TR/2013/WD-css3-transitions-20131119/#changes$, `§ 以前の作業草案からの変更~log＠~TR/2013/WD-css3-transitions-20130212/ChangeLog$ ◎ For changes in earlier working drafts: • See the changes section in the 11 October 2018 Working Draft. • See the changes section in the 30 November 2017 Working Draft. • See the changes section in the 19 November 2013 Working Draft. • See the the ChangeLog for changes in previous working drafts.

以上の変更点についての詳細は、 次に挙げる~version~control変更~logを見よ （~file名が~~改められたため，多くの箇所に分かれている） ⇒＃ `2017年 10月 12日 以降＠https://github.com/w3c/csswg-drafts/commits/main/css-transitions-1/Overview.bs$, `2015年 1月 26日から 2017年 10月 12日まで＠https://hg.csswg.org/drafts/log/tip/css-transitions/Overview.bs$, `2013年 3月 28日から 2015年 1月 26日まで＠https://hg.csswg.org/drafts/log/tip/css-transitions/Overview.src.html$, `2013年 3月 28日より前＠https://hg.csswg.org/drafts/log/tip/css3-transitions/Overview.src.html$ ◎ For more details on these changes, see the version control change logs, which are split in many parts because of file renaming: • change log since 2017 October 12, • change log from 2015 January 26 to 2017 October 12, • change log from 2013 March 28 to 2015 January 26, • change log before 2013 March 28.

謝辞

次の方々, および `www-style＠https://lists.w3.org/Archives/Public/www-style/$ ~communityからの~feedbackに感謝する：

Thanks especially to the feedback from Tab Atkins, Carine Bournez, Aryeh Gregor, Vincent Hardy, Anne van Kesteren, Cameron McCormack, Alex Mogilevsky, Jasper St. Pierre, Estelle Weyl, and all the rest of the www-style community.