1. 導入
このセクションは規範的ではありません。
この文書では、新しいCSS機能である暗黙的トランジションを紹介します。これは、CSSプロパティが指定された期間にわたって一つの値から別の値へ滑らかに変化する方法を記述するものです。
2. トランジション
通常、CSSプロパティの値が変化すると、表示結果は即座に更新され、影響を受ける要素は直ちに古いプロパティ値から新しいプロパティ値へと切り替わります。このセクションでは、新しいCSSプロパティを用いてトランジションを指定する方法について説明します。これらのプロパティは、古い状態から新しい状態へと時間をかけて滑らかにアニメーションさせるために使用されます。
例えば、leftプロパティとbackground-colorプロパティに1秒のトランジションが定義されている場合を考えてみましょう。下記の図は、それらのプロパティを要素に対して更新した際の効果、すなわち要素を右へ移動し背景色を赤から青へ変化させる様子を示しています。他のトランジションパラメータはデフォルト値が使われていると仮定します。
トランジションは表示効果です。プロパティの算出値は、 古い値から新しい値へと時間をかけてトランジションします。そのため、スクリプトがプロパティの算出値(またはそれに依存する他のデータ)をトランジション中に取得すると、 現在アニメーション中の値である中間値が返されます。
プロパティごとのトランジションは複数の新しいプロパティで定義します。例えば:
div { transition-property: opacity; transition-duration: 2s; }上記の例ではopacityプロパティにトランジションを定義しています。新しい値がこのプロパティに割り当てられると、2秒間かけて古い値から新しい値へと滑らかに変化します。
各トランジションプロパティはカンマ区切りのリストを受け付けるため、複数のプロパティに対してそれぞれ異なるトランジションを定義できます。この場合、各トランジションは全てのリストで同じインデックスからパラメータを取得します。例えば:
div { transition-property: opacity, left; transition-duration: 2s, 4s; }この場合、opacityプロパティは2秒間、 leftプロパティは4秒間トランジションします。
トランジションプロパティに指定されたリストの値の長さが一致しない場合、transition-propertyリストの長さが トランジション開始時に調べる各リストのアイテム数となります。リストは最初の値から順に対応付けられ、余分な値は無視されます。他のプロパティリストに値が足りない場合は、値のリストを繰り返して十分な数にします。この切り捨てや繰り返しは算出値には影響しません。 注:この挙動はbackground-*プロパティと似ており、background-imageはtransition-propertyに相当します。
div { transition-property: opacity, left, top, width; transition-duration: 2s, 1s; }上記の例では、opacityプロパティのトランジションは2秒、 leftプロパティは1秒、 topプロパティは2秒、 widthプロパティは1秒のトランジションとなります。
トランジションを使って動的にコンテンツを変化させることができますが、動的なコンテンツは一部の利用者に発作を引き起こす場合があります。発作を引き起こす可能性のあるコンテンツを避ける方法については、ガイドライン2.3: 発作: 発作を引き起こすと知られている方法でコンテンツを設計しないこと([WCAG20])を参照してください。
2.1. transition-property プロパティ
transition-propertyプロパティは、トランジションを適用するCSSプロパティ名を指定します。
名前: | transition-property |
---|---|
値: | none | <single-transition-property># |
初期値: | all |
適用対象: | 全要素 |
継承: | no |
パーセンテージ: | N/A |
算出値: | キーワードnoneまたは識別子リスト |
正規順序: | 文法通り |
アニメーションタイプ: | アニメーション不可 |
noneを値に指定した場合、いずれのプロパティもトランジションしません。 それ以外の場合はトランジションするプロパティのリストまたは全プロパティを示すキーワードallを指定します。
リスト内の識別子の中に認識できないプロパティ名がある場合でも、実装はリスト内のアニメーション可能なプロパティについて、それぞれのインデックスのtransition-duration・transition-delay・transition-timing-functionを使ってトランジションを開始しなければなりません。 つまり、未認識プロパティもインデックス対応のためリスト内に維持されます。
<custom-ident>生成規則は、<single-transition-property>において、 noneキーワードを除外します。 これは、常に除外されるキーワードに加えて、<custom-ident>から除外されるものです。 そのため、none、inherit、 initialは、 複数識別子のリスト内アイテムとして使用できません。これらを使ったリストは文法的に無効です。
allキーワードやリスト内の識別子が ショートハンドプロパティの場合、実装はそのロングハンドサブプロパティすべて(またはallの場合は全プロパティ)について、 ショートハンドに対応するインデックスのduration・delay・timing functionを使ってトランジションを開始しなければなりません。
transition-property値に同じプロパティが複数回指定された場合(個別指定・ショートハンド・all値経由のいずれでも)、最後にそのプロパティをアニメーションすることになったアイテムのインデックスに対応するduration・delay・timing functionを使ってトランジションが開始されます。
注:all値とallショートハンドプロパティは似たような動作をします。つまりall値は全プロパティをカバーするショートハンドのようなものです。
2.2. transition-duration プロパティ
transition-durationプロパティはトランジションにかかる時間を定義します。
名前: | transition-duration |
---|---|
値: | <time># |
初期値: | 0s |
適用対象: | 全要素 |
継承: | no |
パーセンテージ: | N/A |
算出値: | 各アイテムがdurationのリスト |
正規順序: | 文法通り |
アニメーションタイプ: | アニメーション不可 |
このプロパティは、古い値から新しい値へのトランジションにかかる時間を指定します。デフォルト値は0sで、トランジションは即座に行われ(アニメーションはありません)、transition-durationに負の値を指定すると宣言は無効となります。
2.3. transition-timing-function プロパティ
transition-timing-functionプロパティは、トランジション中に使われる中間値がどのように計算されるかを記述します。トランジションの進行中に速度を変化させることができ、これらの効果は一般的にイージング関数と呼ばれます。
タイミング関数は、CSS Easing Functionsモジュール[css-easing-1]で定義されています。 使用されるinput progress valueはトランジション期間のパーセンテージであり、output progress valueは、プロパティ値をp値として補間するときに使用されます(§4 トランジションの適用参照)。
名前: | transition-timing-function |
---|---|
値: | <timing-function># |
初期値: | ease |
適用対象: | すべての要素 |
継承: | no |
パーセンテージ: | N/A |
算出値: | 指定通り |
正規順序: | 文法通り |
アニメーションタイプ: | アニメーション不可 |
2.4. transition-delay プロパティ
transition-delayプロパティは、トランジションの開始タイミングを定義します。適用されてから一定期間後にトランジションを開始することができます。transition-delayの値が0sの場合、プロパティが変更された直後にトランジションが実行されます。それ以外の場合は、プロパティ変更の瞬間から指定されたオフセット分だけ遅れてトランジションが実行されます。
transition-delayの値が負の時間オフセットの場合、プロパティが変更された瞬間にトランジションが実行されますが、指定されたオフセット分だけ再生サイクルの途中から開始したように見えます。トランジションに暗黙の開始値と負のtransition-delayがある場合、開始値はプロパティが変更された瞬間から取得されます。
名前: | transition-delay |
---|---|
値: | <time># |
初期値: | 0s |
適用対象: | すべての要素 |
継承: | no |
パーセンテージ: | N/A |
算出値: | 各アイテムがdurationのリスト |
正規順序: | 文法通り |
アニメーションタイプ: | アニメーション不可 |
2.5. transition ショートハンドプロパティ
transitionショートハンドプロパティは、上記の4つのプロパティを1つにまとめたものです。
名前: | transition |
---|---|
値: | <single-transition># |
初期値: | 個別プロパティを参照 |
適用対象: | すべての要素 |
継承: | no |
パーセンテージ: | N/A |
算出値: | 個別プロパティを参照 |
正規順序: | 文法通り |
Animatable: | no |
アニメーションタイプ: | アニメーション不可 |
このプロパティ内の各アイテムの順序は重要です。 最初にtimeとして解釈できる値はtransition-durationに割り当てられ、 二番目のtimeとして解釈できる値はtransition-delayに割り当てられます。
ショートハンド内に複数の<single-transition>があり、そのうちいずれかのトランジションの<single-transition-property>にnoneが指定されている場合、その宣言は無効です。
3. トランジションの開始
実装は、実行中のトランジションのセットを維持しなければなりません。 それぞれは特定の要素およびショートハンドでないプロパティに適用されます。これらのトランジションにはさらに、開始時刻、終了時刻、開始値、終了値、反転調整開始値、反転短縮係数があります。 トランジションはこのセクションで述べる通り追加され、 完了したときや、実装がキャンセルを要求されたときに、このセットから除去されます。 反転調整開始値と反転短縮係数の根拠については、§3.1 中断されたトランジションの高速な反転を参照してください。
実装はまた、完了したトランジションのセットも維持しなければなりません。 これも(実行中のトランジション同様に)特定の要素とショートハンドでないプロパティに適用されます。 本仕様では、同じプロパティ・要素に対して実行中のトランジションと 完了したトランジションが同時に存在しないことを保証します。
要素がドキュメントから削除された場合、 実装はその要素上の実行中のトランジションをキャンセルし、 完了したトランジションからもその要素に関するトランジションを削除しなければなりません。
完了したトランジションのセットを維持する必要がある理由は、 特定の場合にトランジションが繰り返されることを防ぐためです。 つまり、本仕様が維持しようとしている不変条件 ―無関係なスタイル変更によってトランジションが発生しない― を守るためです。
完了したトランジションのセット維持が必要な例として、 継承プロパティのトランジションを考えます。 親要素がそのプロパティに長いトランジション(例:transition: 4s text-indent)を指定し、 子要素が同じプロパティに短いトランジション(例:transition: 1s text-indent)を指定した場合、 このセットが維持されていないと、子要素の1秒トランジション終了後に、 実装が追加のトランジションを開始してしまうことがあります。
要素上のプロパティの算出値は、 様々な要因で変化します。 例えば、 ドキュメントツリーへの要素の挿入・削除(算出値が存在するかどうかの変化・セレクタ一致による他要素のスタイル変化)、 セレクタ一致結果に影響するドキュメントツリーの変更、 スタイルシートやスタイル属性の変更などです。 本仕様は算出値がいつ更新されるかは定義しませんが、 実装はCSSのカスケード・値計算・継承処理[CSS3CASCADE]から生じるものを算出値を更新せずに使用・表示してはならず、 スタイル変更時に算出値を更新しなかったと主張することで本仕様の要件を回避してはならない、という意味です。 ただし、実装が要素のプロパティの算出値を こういった変化を反映して更新する際や、 ドキュメントに新しく追加された要素のプロパティの算出値を計算する際には、 すべてのプロパティ・要素について変化を同時に反映させなければなりません (または、それが異なるタイミングでされたことが検出できないようにする必要があります)。 この同時スタイル変更処理をスタイル変更イベントと呼びます。 (実装は通常、画面更新レートに合わせてスタイル変更イベントを持ち、 スクリプトAPIで最新の算出スタイルやレイアウト情報が必要な場合にも利用します。)
本仕様がスタイル変更イベントの発生タイミングや、 どの算出値変更が同時と見なされるかを定義していないため、 著者は、トランジションする可能性のある変更の直後にトランジションプロパティを少しだけ変更すると、 実装によって同時と見なされる場合とそうでない場合があり、挙動が異なることに注意すべきです。
スタイル変更イベントが発生したとき、 実装はそのイベントで変化した算出値に基づいてトランジションを開始しなければなりません。 そのスタイル変更イベント中または直前のイベント中に要素がドキュメントに存在しなかった場合、 そのイベントでその要素のトランジションは開始されません。 それ以外の場合、 変更前スタイルを 前回のスタイル変更イベント時点での要素上の全プロパティの算出値 (CSSトランジション、CSSアニメーション ([CSS3-ANIMATIONS])、 SMILアニメーション ([SMIL-ANIMATION], [SVG11]) 由来のスタイルは現在時刻に更新)と定義します。 同様に、変更後スタイルは、 そのスタイル変更イベント開始時点の情報に基づく要素上の全プロパティの算出値 (animation-*プロパティの算出値は変更前スタイルを使用、 CSSトランジション由来のスタイルは除外、 親の変更後スタイルから継承)と定義します。 つまり、変更後スタイルは新しく作成されたりキャンセルされたCSSアニメーションによる違いはありません。
この変更後スタイルの定義により、 単一の変更で同じプロパティに対して 祖先要素・子孫要素両方でトランジションが開始される場合があります。 これは、ある要素がプロパティ変更を継承し、 transition-*プロパティで変更プロパティのアニメーションを指定し、 さらに子要素もtransition-*プロパティでアニメーション指定している場合です。
この場合、両方のトランジションが実行され、 通常のCSSカスケードと継承ルール([CSS3CASCADE])により、 子要素が祖先要素上のトランジションを上書きします。
子要素側のトランジションが祖先要素側より先に完了した場合、 子要素は親から(まだトランジション中の)値を再度継承します。 この挙動は理想的ではないかもしれませんが、 著者が指定した内容に従ったものです。
変更前スタイルと 変更後スタイルを持つ各要素について、 すべてのプロパティ(ショートハンド以外)ごとに、 一致するtransition-property値を、 要素の変更後スタイル内のtransition-propertyの中で最後にそのプロパティと一致するものとして定義します (§2.1 transition-propertyプロパティ参照)。 一致する値が存在する場合、それに対応して 一致するtransition-duration、 一致するtransition-delay、 一致するtransition-timing-functionが 変更後スタイルのtransition-duration・transition-delay・transition-timing-functionの値に存在します (リストの対応規則参照)。 トランジションの合計durationは max(一致するtransition-duration, 0s) と 一致するtransition-delay の合計です。
あるプロパティについて変更前スタイルと変更後スタイルを比較するとき、 そのプロパティ値がアニメーション型 としてnot animatableでもdiscreteでもない場合、トランジション可能とみなします。
注: あるプロパティがアニメーション型としてdiscreteでないと定義されていても、 特定のプロパティ値の組み合わせではアニメーション型がdiscreteの場合があります。 例えば、 box-shadowプロパティのアニメーション型はshadow listですが、 ある値にinsetキーワードがなく、他方にある場合はdiscreteアニメーションとなります。 したがって、0px 0px blackとinset 10px 10px blackは トランジション可能ではありません。
各要素・プロパティごとに、実装は次のように動作しなければなりません:
-
以下すべてが真の場合:
- 要素がそのプロパティについて 実行中のトランジション を持たないこと
- 変更前スタイルと 変更後スタイルがそのプロパティについて異なり、値がトランジション可能であること
- 要素がそのプロパティについて完了したトランジションを持たないか、または完了したトランジションの終了値が変更後スタイルの値と異なること
- 一致するtransition-property値が存在すること
- 合計durationが0sより大きいこと
- 開始時刻 は スタイル変更イベントの時刻+ 一致するtransition-delay
- 終了時刻は 開始時刻+ 一致するtransition-duration
- 開始値は 変更前スタイルの該当プロパティ値
- 終了値は 変更後スタイルの該当プロパティ値
- 反転調整開始値は 開始値と同じ
- 反転短縮係数は 1
- それ以外の場合、 要素がそのプロパティについて完了したトランジションを持ち、 終了値が 変更後スタイルの値と異なる場合、 実装は完了したトランジションをセットから除去しなければなりません。
- 要素がそのプロパティについて実行中のトランジションまたは完了したトランジションを持ち、 一致するtransition-property値が存在しない場合、 実装はキャンセルを実行中トランジションに対して行うか、完了したトランジションをセットから除去しなければなりません。
-
要素がそのプロパティについて実行中のトランジションを持ち、
一致するtransition-property値が存在し、
終了値が
変更後スタイルの値と等しくない場合:
- 現在値が 実行中のトランジション内で 変更後スタイルの値と等しい場合、または両者がトランジション可能でない場合、 実装はキャンセルを実行中トランジションに行う
- それ以外で、合計durationが 0s以下、または現在値が 変更後スタイルの値とトランジション可能でない場合、 実装はキャンセルを実行中トランジションに行う
-
それ以外で、反転調整開始値が
変更後スタイルの値と等しい場合(詳細は反転トランジションのセクション参照)、
実装はキャンセルを実行中トランジションに行い、
次の内容で新しいトランジションを開始する:
- 反転調整開始値は 終了値(旧トランジションの) (論理的な開始状態。これにより繰り返し反転時の計算が正しくなる)
-
反転短縮係数は
次の合計値(絶対値・[0, 1]でクランプ):
- 旧トランジションのタイミング関数出力(スタイル変更イベント時刻)×旧トランジションの反転短縮係数
- 1 - 旧トランジションの反転短縮係数
-
開始時刻は
スタイル変更イベントの時刻+
- 一致するtransition-delayが0以上ならその値
- 負なら新トランジションの反転短縮係数×一致するtransition-delay
- 終了時刻は 開始時刻+ 新トランジションの反転短縮係数×一致するtransition-duration
- 開始値は 現在値 (旧トランジションのプロパティ値)
- 終了値は 変更後スタイルの値
-
それ以外の場合、実装はキャンセルを実行中トランジションに行い、
次の内容で新しいトランジションを開始する:
- 開始時刻は スタイル変更イベントの時刻+ 一致するtransition-delay
- 終了時刻は 開始時刻+ 一致するtransition-duration
- 開始値は 現在値 (旧トランジションのプロパティ値)
- 終了値は 変更後スタイルの値
- 反転調整開始値は 開始値と同じ
- 反転短縮係数は 1
上記の規則により、アニメーション可能なプロパティの算出値が変化した場合、開始されるトランジションは、そのプロパティが新しい算出値を最初に持つ時点でのtransition-property、transition-duration、transition-timing-function、およびtransition-delayプロパティの値に基づいています。 つまり、これらのtransition-*プロパティのいずれかが、トランジションの対象となるプロパティと同時に変更された場合、トランジションを制御するのは新しいtransition-*プロパティの値です。
この方法により、著者は「順方向」と「逆方向」のトランジションのためにtransition-*プロパティの異なる値を指定できます(ただし、未完了のトランジションが中断された場合の特別な反転動作については下記参照)。著者はtransition-duration、transition-timing-function、またはtransition-delayを、トランジションを誘発する値と同じルール内で指定したり、トランジションの対象となるプロパティ変更と同時に変更できます。これらのtransition-*プロパティの新しい値がトランジションに影響するため、これらの値は関連するトランジション先の値へのトランジションに使用されます。例えば:
li { transition: background-color linear 1s; background: blue; } li:hover { background-color: green; transition-duration: 2s; /* :hover状態へのトランジションに適用 */ }
このスタイルルールを持つリスト項目が:hover状態になると、transition-durationの算出値はbackground-colorが新しい値(green)になる時点で2sとなるため、blueからgreenへのトランジションは2秒かかります。一方、リスト項目が:hover状態を離れると、greenからblueへのトランジションは1秒で行われます。
プロパティのトランジションが開始された(遅延フェーズも含む)後は、transition-timing-function、transition-duration、transition-delayプロパティがトランジション完了前に変更されても、元のタイミング関数・duration・delayで継続します。ただし、transition-propertyが変更されてトランジションが開始されなかった場合には、トランジションは停止し、プロパティは直ちに最終値に変化します。
上記の規則により、宣言的アニメーション(スクリプトによるアニメーションではなく)によってプロパティの算出値が変化した場合、トランジションは開始されません。これは、変更前スタイルが宣言的アニメーションの最新スタイルを含むためです。
3.1. 中断されたトランジションの高速な反転
一般的なトランジション効果の多くは、2つの状態間のトランジションを伴います。例えば、マウスポインターがUI要素上に移動した時、さらに要素から離れた時です。こうした効果では、トランジションが完了する前に中断され、プロパティが元の開始値にリセットされることがよくあります。例として、要素のhover効果では、ポインターが要素に入ったときにトランジションが始まり、効果が完了する前にポインターが要素から外れる場合です。もし出入り両方のトランジションが指定されたdurationやタイミング関数で実行されると、2つ目のトランジションは短い距離を移動するのに全durationを使うため、非対称で違和感ある効果になりがちです。本仕様では2つ目のトランジションを短くします。
この仕組みには反転短縮係数と反転調整開始値が関与します。特に、反転動作は反転短縮係数が1未満である場合に発生します。
これらの規則は、2つ以上の状態が絡むトランジションパターンには十分対応しません。
また、この規則により新しいトランジションのタイミング関数全体が使われ、タイミング関数の途中からジャンプすることはなく、唐突な効果が避けられます。
これは、ワーキンググループで検討された候補の一つでした。いくつかの例はreversing demoで示されており、2013-06-07のWG決議および2013-11-11の編集に反映されています。
4. トランジションの適用
要素のプロパティがトランジション中(つまり、トランジションが開始された後または開始中で、終了時刻前)であれば、トランジションは現在値というスタイルをCSSカスケードに追加します(CSS Transitionsのレベルは[CSS3CASCADE]参照)。
このため、CSSトランジションによる算出値は他の算出値と同様に子孫要素に継承されます。通常、継承プロパティのトランジションは著者の想定通り子孫にも適用されます。
実装は、同じ要素・プロパティに対してCSS Animation([CSS3-ANIMATIONS])が適用されていない場合のみ、この値をカスケードに追加しなければなりません。
同じ要素・プロパティにアニメーションが実行中の場合、トランジションがカスケードに適用されないこの挙動は、トランジションの開始や終了自体には影響しません。API(トランジションイベントなど)でトランジションが実行中かどうかは正しく報告されます。
現在時刻がトランジションの開始時刻以前(遅延フェーズ中)の場合、現在値はトランジションの開始値に算出される指定スタイルです。
現在時刻がトランジションの開始時刻以降(durationフェーズ中)の場合、現在値は下記の値を使ってプロパティを補間した結果となる指定スタイルです:
具体的な補間手順は、プロパティのアニメーション型で定義されています。
5. トランジションの完了
実行中のトランジションは、終了時刻以上かつ最初のスタイル変更イベントの時刻以上より前の時点で完了します。トランジションが完了すると、実装はその時点で完了したすべてのトランジションを実行中のトランジションのセットから完了したトランジションのセットへ移動し、完了イベント(events)を発火しなければなりません。(一部のみ移動→イベント発火すると、イベントハンドラが最新算出スタイル等を要求した場合、必要なトランジションが完了しない状態でスタイル変更イベントが発生する可能性があるため、すべて移動してからイベントを発火する必要があります。)
6. トランジションイベント
CSSトランジションの生成・開始・完了・キャンセル時に対応するDOMイベントが生成されます。各プロパティごとに、トランジションが発生した要素へイベントがdispatchされます。これにより、コンテンツ開発者はトランジションの変化にあわせて処理を同期できます。
各イベントは、トランジションに関連するプロパティ名およびトランジションのdurationを提供します。
6.1.
インターフェース TransitionEvent
TransitionEvent
インターフェースは、トランジションに関連する特定のコンテキスト情報を提供します。
6.1.1. IDL定義
[Exposed =Window ,Constructor (CSSOMString ,
type optional TransitionEventInit )]
transitionEventInitDict interface :
TransitionEvent Event {readonly attribute CSSOMString propertyName ;readonly attribute double elapsedTime ;readonly attribute CSSOMString pseudoElement ; };dictionary :
TransitionEventInit EventInit {CSSOMString = "";
propertyName double = 0.0;
elapsedTime CSSOMString = ""; };
pseudoElement
6.1.2. 属性
propertyName
, 型 CSSOMString, readonly-
トランジションに関連付けられたCSSプロパティ名。
注: これは常にロングハンドプロパティの名前です。ショートハンド指定でトランジションがロングハンドに適用される仕組みはtransition-property参照。
elapsedTime
, 型 double, readonly-
このイベントが発火した時点で、遅延フェーズを除いたトランジション実行時間(秒単位)。この値の計算はイベントタイプごとに定義されています。
pseudoElement
, 型 CSSOMString, readonly-
トランジションが発生したCSS疑似要素名(先頭にコロン2つ)。疑似要素の場合イベント対象はその対応する要素、要素の場合は空文字列(イベント対象はその要素)。
はevent constructorです。TransitionEvent(type, transitionEventInitDict)
6.2. TransitionEvent
の種類
発生しうるトランジションイベントの種類は次の通りです:
transitionrun
-
transitionrun
イベントは、トランジションが生成された時(実行中のトランジションに追加された時)に発生します。負のtransition-delayの場合、イベントの
elapsedTime
は遅延の絶対値(アニメーションのtransition-durationまでで上限)となります、すなわちmin(max(-transition-delay, 0), transition-duration)
です。- Bubbles: Yes
- Cancelable: No
- Context Info: propertyName, elapsedTime, pseudoElement
transitionstart
-
transitionstart
イベントは、トランジションの遅延フェーズが終了した時に発生します。このイベントの
elapsedTime
の値は、transitionrun
イベントの値と同じです。- Bubbles: Yes
- Cancelable: No
- Context Info: propertyName, elapsedTime, pseudoElement
transitionend
-
transitionend
イベントは、トランジションの完了時に発生します。トランジションが完了前に削除された場合(例:transition-propertyが削除された場合)、イベントは発火しません。このイベントの
elapsedTime
の値はtransition-durationの値です。- Bubbles: Yes
- Cancelable: No
- Context Info: propertyName, elapsedTime, pseudoElement
transitioncancel
-
transitioncancel
イベントは、トランジションがキャンセルされた時に発生します。elapsedTime
は、トランジションの遅延終了からキャンセル時点までの秒数です。負のtransition-delayの場合、トランジションの開始は実際のトリガー時刻よりtransition-delay秒前となります。正のtransition-delayで遅延終了前にイベントが発火した場合、elapsedTime
はゼロになります。- Bubbles: Yes
- Cancelable: No
- Context Info: propertyName, elapsedTime, pseudoElement
6.3. 要素・Document
オブジェクト・Window
オブジェクトのイベントハンドラ
以下は、すべてのHTML要素で
イベントハンドラ内容属性およびイベントハンドラIDL属性として、
またすべてのDocument
およびWindow
オブジェクトではイベントハンドラIDL属性としてサポートされなければならない
イベントハンドラ
(および対応するイベントハンドライベント型)です:
イベントハンドラ | イベントハンドライベント型 |
---|---|
ontransitionrun
| transitionrun |
ontransitionstart
| transitionstart |
ontransitionend
| transitionend |
ontransitioncancel
| transitioncancel |
7. DOMインターフェース
この仕様はHTMLのGlobalEventHandlers
インターフェースを拡張し、
イベントハンドラIDL属性としてトランジションイベントを追加します(§6.3
要素・Documentオブジェクト・Windowオブジェクトのイベントハンドラ参照)。
7.1. IDL定義
partial interface GlobalEventHandlers {attribute EventHandler ;
ontransitionrun attribute EventHandler ;
ontransitionstart attribute EventHandler ;
ontransitionend attribute EventHandler ; };
ontransitioncancel
8. セキュリティに関する考慮事項
このセクションは規範的ではありません。
この仕様のセキュリティへの影響は限定的です。 なぜならWebコンテンツに従来できなかったことを可能にするものではないからです。 むしろ、従来スクリプトでできたものを宣言的にできるようにし、 実装が最適化(フレームレートやCPU利用率向上)できるようにします。
実装が行える最適化の主なカテゴリの1つは、 transformやopacityなど価値の高いプロパティのアニメーションを ブラウザのコンポジタースレッドまたはプロセス上で実行し、 メインのWebコンテンツスレッドでスタイルやレイアウトを更新せずに済ませることです (最新スタイルデータが必要な場合を除く)。 この最適化にはアニメーション対象要素のグラフィックメモリ割り当てが必要な場合があります。 実装者はWebコンテンツが多数のアニメーションや大きな領域の要素(pre-transformやpost-transformサイズ)に アニメーションを適用することで メモリ不足による危険な処理を引き起こさないよう配慮すべきです。
9. プライバシーに関する考慮事項
このセクションは規範的ではありません。
セキュリティと同様に、この仕様のプライバシーへの影響も限定的です。 Webコンテンツに従来できなかったことを可能にするものではないからです。
この仕様は、ユーザーのハードウェアやソフトウェアの特性を判別する追加手段を提供する場合がありますが、 ユーザーの性能特性を判定する機能自体は多くのWeb技術に共通であり、 この仕様が新しい機能を導入するわけではありません。
§10 アクセシビリティに関する考慮事項に記載の通り、 実装は障害者支援の緩和策を提供する場合があります。 これらの緩和策はWebコンテンツから検出可能である可能性があり、 対象ユーザーはコンテンツへ障害情報を秘匿するか緩和策の恩恵を受けるかの選択を迫られる場合があります。
10. アクセシビリティに関する考慮事項
このセクションは規範的ではありません。
10.1. 動き
この仕様は、従来スクリプトでのみ可能だったアニメーションに宣言的手段を提供します。 宣言的手段を提供することで、アニメーション作成が容易になり普及しやすくなる一方、 ユーザーエージェントが必要に応じてアクセシビリティ要件に合わせてアニメーションを修正しやすくなります。
そのため、動きに敏感なユーザーや、内容の読解に追加時間が必要なユーザーは、 アニメーションを無効化したり遅くしたりできるユーザーエージェントの機能の恩恵を受ける場合があります。 (緩和策によるプライバシーへの影響については§9 プライバシーに関する考慮事項参照)
ユーザーエージェント実装者は、Webコンテンツがトランジションイベントの発火に依存する場合があることに注意すべきです。 このような緩和策の実装でも、トランジションが継続的なアニメーションとして実行されなくても トランジションイベントを発火したほうがよいかもしれません。 ただし、Webコンテンツがイベント発火に依存して正しく動作するのは望ましくありません。
10.2. カスケード
CSSのカスケードは、 ユーザーのニーズと著者スタイルが相互作用できるCSSの一般的な仕組みです。 本仕様はカスケードと連携しますが、 既存のカスケード規則によって得られた値間のみアニメーションを許可しているため、 ユーザーがCSSプロパティに特定値を強制する能力を妨げません。
カスケードによって、ユーザーはトランジションプロパティを上書きして トランジション自体を無効化することも可能です。
11. 2017年11月30日作業草案以降の変更点
2017年11月30日付作業草案以降の主な変更点は以下の通りです:
-
スムーズな補間ができない値に対してdiscrete アニメーションによるトランジションを発生させる変更を元に戻しました(いずれのユーザーエージェントにも実装されておらず、互換性問題につながるため)。
-
プロパティの補間方法の定義をWeb AnimationsおよびCSS Values and Unitsに移動しました。
これらの変更の詳細は、バージョン管理change logをご参照ください。
以前の作業草案の変更点について:
-
これらの変更の詳細は、ファイル名変更などで分割されたバージョン管理change logを参照:
12. 謝辞
特に以下の方々のフィードバックに感謝します: Tab Atkins, Carine Bournez, Aryeh Gregor, Vincent Hardy, Anne van Kesteren, Cameron McCormack, Alex Mogilevsky, Jasper St. Pierre, Estelle Weyl, およびwww-styleコミュニティの皆様。