CSS トランジション

W3C 作業草案,

このバージョン:
https://www.w3.org/TR/2018/WD-css-transitions-1-20181011/
最新公開バージョン:
https://www.w3.org/TR/css-transitions-1/
編集者草案:
https://drafts.csswg.org/css-transitions/
以前のバージョン:
テストスイート:
http://test.csswg.org/suites/css-transitions-1_dev/nightly-unstable/
課題追跡:
このレベルのBugzillaバグ
全レベルのBugzillaバグ
GitHub課題
編集者:
L. David Baron (Mozilla)
(Apple Inc)
(Mozilla)
以前の編集者:
(Apple Inc)
(Apple Inc)
この仕様への編集提案:
GitHub 編集者

概要

CSSトランジションは、CSS値のプロパティ変更を指定した期間にわたって滑らかに行うことを可能にします。

CSSは、構造化された文書(HTMLやXMLなど)のレンダリングを画面上や紙面上などで記述するための言語です。

この文書のステータス

このセクションは、公開時点でのこの文書のステータスについて説明しています。他の文書が本書に取って代わる場合があります。現在のW3C出版物の一覧およびこの技術レポートの最新改訂は、https://www.w3.org/TR/ のW3C技術レポートインデックスで確認できます。

作業草案として公開されることは、W3Cメンバーによる支持を意味するものではありません。本書は草案であり、随時更新、置換、廃止される可能性があります。本書を進行中の作業以外のものとして引用するのは不適切です。

GitHub課題にて、この仕様の議論を行うことが推奨されています。課題を提出する際は、タイトルに「css-transitions」という文言を含めてください。例: “[css-transitions] …コメントの概要…”。すべての課題とコメントはアーカイブされており、過去のアーカイブもあります。

この文書はCSS作業グループスタイル活動の一部)によって作成されました。

この文書は、W3C特許ポリシーのもとで活動するグループによって作成されました。W3Cは、グループの成果物に関連して行われた特許開示の公開リストを維持しています。このページには特許開示の方法も記載されています。ある特許が必須の請求項を含むと信じる場合、W3C特許ポリシー6条に従って情報開示を行う義務があります。

この文書は2018年2月1日 W3Cプロセス文書によって管理されています。

この文書は最終コールに比較的近いと予想されます。未解決の課題もありますが、このレベルでは新機能が追加される可能性は極めて低いです。

1. 導入

このセクションは規範的ではありません。

この文書では、新しいCSS機能である暗黙的トランジションを紹介します。これは、CSSプロパティが指定された期間にわたって一つの値から別の値へ滑らかに変化する方法を記述するものです。

2. トランジション

通常、CSSプロパティの値が変化すると、表示結果は即座に更新され、影響を受ける要素は直ちに古いプロパティ値から新しいプロパティ値へと切り替わります。このセクションでは、新しいCSSプロパティを用いてトランジションを指定する方法について説明します。これらのプロパティは、古い状態から新しい状態へと時間をかけて滑らかにアニメーションさせるために使用されます。

例えば、leftプロパティとbackground-colorプロパティに1秒のトランジションが定義されている場合を考えてみましょう。下記の図は、それらのプロパティを要素に対して更新した際の効果、すなわち要素を右へ移動し背景色を赤から青へ変化させる様子を示しています。他のトランジションパラメータはデフォルト値が使われていると仮定します。

色と位置が補間されるボックスの初期・中間・最終状態を示す例
leftプロパティと background-colorプロパティのトランジション。

トランジションは表示効果です。プロパティの算出値は、 古い値から新しい値へと時間をかけてトランジションします。そのため、スクリプトがプロパティの算出値(またはそれに依存する他のデータ)をトランジション中に取得すると、 現在アニメーション中の値である中間値が返されます。

プロパティごとのトランジションは複数の新しいプロパティで定義します。例えば:

例:

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-imagetransition-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または識別子リスト
正規順序: 文法通り
アニメーションタイプ: アニメーション不可
<single-transition-property> = all | <custom-ident>;

noneを値に指定した場合、いずれのプロパティもトランジションしません。 それ以外の場合はトランジションするプロパティのリストまたは全プロパティを示すキーワードallを指定します。

リスト内の識別子の中に認識できないプロパティ名がある場合でも、実装はリスト内のアニメーション可能なプロパティについて、それぞれのインデックスのtransition-durationtransition-delaytransition-timing-functionを使ってトランジションを開始しなければなりません。 つまり、未認識プロパティもインデックス対応のためリスト内に維持されます。

<custom-ident>生成規則は、<single-transition-property>において、 noneキーワードを除外します。 これは、常に除外されるキーワードに加えて、<custom-ident>から除外されるものです。 そのため、noneinheritinitialは、 複数識別子のリスト内アイテムとして使用できません。これらを使ったリストは文法的に無効です。

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
アニメーションタイプ: アニメーション不可
<single-transition> = [ none | <single-transition-property> ] || <time> || <timing-function> || <time>

このプロパティ内の各アイテムの順序は重要です。 最初に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-durationtransition-delaytransition-timing-functionの値に存在します (リストの対応規則参照)。 トランジションの合計durationは max(一致するtransition-duration, 0s) と 一致するtransition-delay の合計です。

あるプロパティについて変更前スタイル変更後スタイルを比較するとき、 そのプロパティ値がアニメーション型 としてnot animatableでもdiscreteでもない場合、トランジション可能とみなします。

注: あるプロパティアニメーション型としてdiscreteでないと定義されていても、 特定のプロパティ値の組み合わせではアニメーション型discreteの場合があります。 例えば、 box-shadowプロパティのアニメーション型shadow listですが、 ある値にinsetキーワードがなく、他方にある場合はdiscreteアニメーションとなります。 したがって、0px 0px blackinset 10px 10px blackトランジション可能ではありません。

各要素・プロパティごとに、実装は次のように動作しなければなりません:

  1. 以下すべてが真の場合: この場合、実装は 完了したトランジション(存在する場合)を完了セットから除去し、 次の内容でトランジションを開始しなければなりません:
  2. それ以外の場合、 要素がそのプロパティについて完了したトランジションを持ち、 終了値変更後スタイルの値と異なる場合、 実装は完了したトランジションをセットから除去しなければなりません。
  3. 要素がそのプロパティについて実行中のトランジションまたは完了したトランジションを持ち、 一致するtransition-property値存在しない場合、 実装はキャンセルを実行中トランジションに対して行うか、完了したトランジションをセットから除去しなければなりません。
  4. 要素がそのプロパティについて実行中のトランジションを持ち、 一致するtransition-property値が存在し、 終了値変更後スタイルの値と等しくない場合:
    1. 現在値実行中のトランジション内で 変更後スタイルの値と等しい場合、または両者がトランジション可能でない場合、 実装はキャンセルを実行中トランジションに行う
    2. それ以外で、合計durationが 0s以下、または現在値変更後スタイルの値とトランジション可能でない場合、 実装はキャンセルを実行中トランジションに行う
    3. それ以外で、反転調整開始値変更後スタイルの値と等しい場合(詳細は反転トランジションのセクション参照)、 実装はキャンセルを実行中トランジションに行い、 次の内容で新しいトランジションを開始する:
      • 反転調整開始値終了値(旧トランジションの) (論理的な開始状態。これにより繰り返し反転時の計算が正しくなる)
      • 反転短縮係数は 次の合計値(絶対値・[0, 1]でクランプ):
        1. 旧トランジションのタイミング関数出力(スタイル変更イベント時刻)×旧トランジションの反転短縮係数
        2. 1 - 旧トランジションの反転短縮係数
        (旧トランジションが開始値~終了値間をどこまで進んだかの割合。ただし絶対値・クランプでy1/y2が範囲外の場合も考慮)
      • 開始時刻スタイル変更イベントの時刻+
        1. 一致するtransition-delayが0以上ならその値
        2. 負なら新トランジションの反転短縮係数×一致するtransition-delay
      • 終了時刻開始時刻+ 新トランジションの反転短縮係数×一致するtransition-duration
      • 開始値現在値 (旧トランジションのプロパティ値)
      • 終了値変更後スタイルの値
    4. それ以外の場合、実装はキャンセルを実行中トランジションに行い、 次の内容で新しいトランジションを開始する:

上記の規則により、アニメーション可能なプロパティの算出値が変化した場合、開始されるトランジションは、そのプロパティが新しい算出値を最初に持つ時点でのtransition-propertytransition-durationtransition-timing-function、およびtransition-delayプロパティの値に基づいています。 つまり、これらのtransition-*プロパティのいずれかが、トランジションの対象となるプロパティと同時に変更された場合、トランジションを制御するのは新しいtransition-*プロパティの値です。

例:

この方法により、著者は「順方向」と「逆方向」のトランジションのためにtransition-*プロパティの異なる値を指定できます(ただし、未完了のトランジションが中断された場合の特別な反転動作については下記参照)。著者はtransition-durationtransition-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-functiontransition-durationtransition-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 elapsedTime = 0.0;
  CSSOMString pseudoElement = "";
};

6.1.2. 属性

propertyName, CSSOMString, readonly

トランジションに関連付けられたCSSプロパティ名。

注: これは常にロングハンドプロパティの名前です。ショートハンド指定でトランジションがロングハンドに適用される仕組みはtransition-property参照。

elapsedTime, double, readonly

このイベントが発火した時点で、遅延フェーズを除いたトランジション実行時間(秒単位)。この値の計算はイベントタイプごとに定義されています。

pseudoElement, CSSOMString, readonly

トランジションが発生したCSS疑似要素名(先頭にコロン2つ)。疑似要素の場合イベント対象はその対応する要素、要素の場合は空文字列(イベント対象はその要素)。

TransitionEvent(type, transitionEventInitDict)event constructorです。

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つは、 transformopacityなど価値の高いプロパティのアニメーションを ブラウザのコンポジタースレッドまたはプロセス上で実行し、 メインの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日付作業草案以降の主な変更点は以下の通りです:

これらの変更の詳細は、バージョン管理change logをご参照ください。

以前の作業草案の変更点について:

  1. 2017年11月30日作業草案の変更点セクション参照。

  2. 2013年11月19日作業草案の変更点セクション参照。

  3. 過去作業草案のChangeLog参照。

  4. これらの変更の詳細は、ファイル名変更などで分割されたバージョン管理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コミュニティの皆様。

適合性

文書規約

適合性要件は、記述的な断定とRFC 2119の用語の組み合わせで表現されています。規範部分で使われる「MUST」「MUST NOT」「REQUIRED」「SHALL」「SHALL NOT」「SHOULD」「SHOULD NOT」「RECOMMENDED」「MAY」「OPTIONAL」はRFC 2119に記載された通りに解釈されます。ただし、可読性のため本仕様ではこれらの語はすべて大文字では記載されていません。

この仕様の文書は、明示的に非規範と記載したセクション、例、および注記を除いてすべて規範的です。[RFC2119]

この仕様の例は「for example」という語で始まるか、class="example"のような属性で規範テキストから区別されます。例:

これは情報的な例です。

情報的な注記は「Note」で始まり、class="note"属性で規範テキストから区別されます。例:

注: これは情報的な注記です。

助言は規範的なセクションであり、<strong class="advisement">属性で他の規範テキストから区別されます。例: UAはアクセシブルな代替手段を提供しなければならない。

適合クラス

この仕様への適合性は、以下3つの適合クラスについて定義されます:

スタイルシート
CSSスタイルシート
レンダラー
UA(スタイルシートの意味を解釈し、使用する文書をレンダリングするもの)
オーサリングツール
UA(スタイルシートを作成するもの)

スタイルシートがこの仕様に適合するには、このモジュールで定義された構文を使うすべての文が、汎用CSS文法およびこのモジュールで定義された各機能の個別文法に従って有効である必要があります。

レンダラーがこの仕様に適合するには、スタイルシートの解釈を適切な仕様に従って行うことに加え、この仕様で定義されたすべての機能を正しくパースして文書をレンダリングする必要があります。ただし、デバイスの制約によりUAが文書を正しくレンダリングできない場合は、UAが非適合であるとはみなされません(例: モノクロモニタで色をレンダリングする必要はない)。

オーサリングツールがこの仕様に適合するには、汎用CSS文法およびこのモジュールで定義された各機能の個別文法に従って文法的に正しいスタイルシートを作成し、このモジュールに記載されたスタイルシートのすべての適合性要件を満たす必要があります。

CSSの責任ある実装のための要件

以下のセクションでは、現在および将来の相互運用性を促進するために、CSSを責任を持って実装するためのいくつかの適合要件を定義します。

部分的な実装

著者が前方互換なパース規則を利用してフォールバック値を指定できるよう、CSSレンダラーは、 サポートレベルが不十分なatルール、プロパティ、プロパティ値、キーワード、その他の構文要素を無効として (必要に応じて無視) 処理しなければならない。 特に、UAはサポートされていない値のみを選択的に無視し、同じ複数値宣言内のサポートされている値だけを適用してはならない。 いずれかの値が無効(未サポート値は無効である必要あり)とみなされた場合、CSSは宣言全体を無視することを要求する。

不安定・独自機能の実装

将来の安定したCSS機能と衝突しないよう、CSSWGはベストプラクティスに従って、 不安定機能や独自拡張を実装することを推奨します。

CRレベル機能の実装

仕様がCandidate Recommendation段階に達したら、実装者は仕様通り正しく実装されていることを示せるCRレベル機能について プレフィックスなしの実装を公開すべきであり、 プレフィックス付きのバリアントは公開しないようにすべきです。

CSSの相互運用性を維持するため、CSSワーキンググループは実験的でないCSSレンダラーに CSS機能のプレフィックスなし実装を公開する前に実装報告書(必要ならテストケースも)をW3Cに提出することを求めます。 W3Cに提出されたテストケースはCSSワーキンググループによるレビュー・修正の対象となります。

テストケースや実装報告書の提出方法等詳細はCSSワーキンググループのWebサイト https://www.w3.org/Style/CSS/Test/を参照。 質問はpublic-css-testsuite@w3.org宛に。

索引

本仕様で定義される用語

参照によって定義される用語

参考文献

標準参考文献

[CSS-CASCADE-4]
Elika Etemad; Tab Atkins Jr.. CSS Cascading and Inheritance Level 4. 2018年8月28日. CR. URL: https://www.w3.org/TR/css-cascade-4/
[CSS-COLOR-3]
Tantek Çelik; Chris Lilley; David Baron. CSS Color Module Level 3. 2018年6月19日. REC. URL: https://www.w3.org/TR/css-color-3/
[CSS-EASING-1]
Brian Birtles; Dean Jackson; Matt Rakow. CSS Easing Functions Level 1. 2018年10月9日. WD. URL: https://www.w3.org/TR/css-easing-1/
[CSS-TRANSFORMS-1]
Simon Fraser; 他. CSS Transforms Module Level 1. 2017年11月30日. WD. URL: https://www.w3.org/TR/css-transforms-1/
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. 2018年8月14日. CR. URL: https://www.w3.org/TR/css-values-3/
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. 2018年8月14日. WD. URL: https://www.w3.org/TR/css-values-4/
[CSS2]
Bert Bos; 他. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 2011年6月7日. REC. URL: https://www.w3.org/TR/CSS2/
[CSS3-ANIMATIONS]
Dean Jackson; 他. CSS Animations Level 1. 2017年11月30日. WD. URL: https://www.w3.org/TR/css-animations-1/
[CSS3CASCADE]
Elika Etemad; Tab Atkins Jr.. CSS Cascading and Inheritance Level 3. 2018年8月28日. CR. URL: https://www.w3.org/TR/css-cascade-3/
[CSSOM-1]
Simon Pieters; Glenn Adams. CSS Object Model (CSSOM). 2016年3月17日. WD. URL: https://www.w3.org/TR/cssom-1/
[DOM]
Anne van Kesteren. DOM Standard. Living Standard. URL: https://dom.spec.whatwg.org/
[HTML]
Anne van Kesteren; 他. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. 1997年3月. Best Current Practice. URL: https://tools.ietf.org/html/rfc2119
[WEB-ANIMATIONS-1]
Brian Birtles; 他. Web Animations. 2016年9月13日. WD. URL: https://www.w3.org/TR/web-animations-1/
[WebIDL]
Cameron McCormack; Boris Zbarsky; Tobie Langel. Web IDL. 2016年12月15日. ED. URL: https://heycam.github.io/webidl/

参考情報文献

[CSS-BACKGROUNDS-3]
Bert Bos; Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. 2017年10月17日. CR. URL: https://www.w3.org/TR/css-backgrounds-3/
[SMIL-ANIMATION]
Patrick Schmitz; Aaron Cohen. SMIL Animation. 2001年9月4日. REC. URL: https://www.w3.org/TR/smil-animation/
[SVG11]
Erik Dahlström; 他. Scalable Vector Graphics (SVG) 1.1 (Second Edition). 2011年8月16日. REC. URL: https://www.w3.org/TR/SVG11/
[WCAG20]
Ben Caldwell; 他. Web Content Accessibility Guidelines (WCAG) 2.0. 2008年12月11日. REC. URL: https://www.w3.org/TR/WCAG20/

プロパティ索引

名前 初期値 適用対象 継承 %ages アニメーション可能 アニメーション型 正規順序 算出値
transition <single-transition># 個別プロパティを参照 全要素 no N/A no アニメーション不可 文法通り 個別プロパティを参照
transition-delay <time># 0s 全要素 no N/A アニメーション不可 文法通り 各アイテムがdurationのリスト
transition-duration <time># 0s 全要素 no N/A アニメーション不可 文法通り 各アイテムがdurationのリスト
transition-property none | <single-transition-property># all 全要素 no N/A アニメーション不可 文法通り キーワードnoneまたは識別子リスト
transition-timing-function <timing-function># ease 全要素 no N/A アニメーション不可 文法通り 指定通り

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 elapsedTime = 0.0;
  CSSOMString pseudoElement = "";
};

partial interface GlobalEventHandlers {
  attribute EventHandler ontransitionrun;
  attribute EventHandler ontransitionstart;
  attribute EventHandler ontransitionend;
  attribute EventHandler ontransitioncancel;
};