CSSトランジション・モジュール レベル1

W3C作業草案,

この文書の詳細情報
このバージョン:
https://www.w3.org/TR/2026/WD-css-transitions-1-20260108/
最新公開バージョン:
https://www.w3.org/TR/css-transitions-1/
編集者草稿:
https://drafts.csswg.org/css-transitions/
以前のバージョン:
履歴:
https://www.w3.org/standards/history/css-transitions-1/
テストスイート:
https://wpt.fyi/results/css/css-transitions
https://wpt.fyi/results/css/css-transitions/
フィードバック:
CSSWG イシュー リポジトリ
すべてのレベルの Bugzilla バグ
編集者:
L. David Baron (Google)
(Mozilla)
以前の編集者:
(Apple Inc)
(Apple Inc)
(Apple Inc)
この仕様書への編集提案:
GitHub Editor

概要

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

CSSは、構造化文書(HTMLやXMLなど)のレンダリング方法を 画面や印刷物などに記述するための言語です。

この文書の位置付け

このセクションは、本書の公開時点での位置付けを説明しています。 現在のW3C出版物の一覧と 本技術報告書の最新版は、W3C 標準およびドラフト一覧にあります。

本文書はCSS作業グループによって 作業草案として 勧告トラックで公開されました。 作業草案としての公開は W3Cおよびその会員による支持を意味するものではありません。

本文書は草案であり、 いつでも他の文書により更新、置換、または廃止される可能性があります。 本文書を進行中の作業以外のものとして引用するのは適切ではありません。

フィードバックは GitHubでイシューを作成(推奨)、タイトルに “css-transitions” という仕様コードを含めて記入してください(例: “[css-transitions] …コメントの要約…”)。 すべてのイシューとコメントはアーカイブされています。 または、(アーカイブ) 公開メーリングリストwww-style@w3.orgまでお送りください。

本書は2025年8月18日W3Cプロセス文書に従って管理されています。

本書はW3C特許ポリシーの下で運用されているグループによって作成されました。 W3Cは、グループの成果物に関連して行われたいかなる特許の開示も公開リストとして管理しています。 このページには特許開示の提出手続きも記載されています。 個人が、必須特許請求項が含まれていると信じる特許について実際に知識がある場合、 W3C特許ポリシー第6節に従って情報を開示しなければなりません。

本書は最終案に比較的近い段階であると考えられます。未対応のイシューもありますが、新機能の追加については本レベルでは極めて考えにくい状況です。

1. 導入

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

この文書では、暗黙的トランジションを可能にする新しいCSS機能を紹介します。これは、CSSプロパティが指定した期間にわたって値をなめらかに遷移させる方法を記述するものです。

テスト

クラッシュ


1.1. 値の定義

本仕様は、CSSプロパティ定義規約[CSS2])に従い、値定義構文[CSS-VALUES-3])を使用します。 本仕様で定義されていない値型は、CSS Values & Units [CSS-VALUES-3]で定義されています。 他のCSSモジュールと組み合わせることで、これらの値型の定義が拡張される場合があります。

各プロパティの定義で挙げられているプロパティ固有の値に加えて、 本仕様で定義されるすべてのプロパティは、 CSS全域キーワードもプロパティ値として受け付けます。 読みやすさのため、ここでは明示せず省略しています。

2. トランジション

通常、CSSプロパティの値が変化すると、レンダリング結果は即座に更新され、該当する要素はすぐに古い値から新しい値へと切り替わります。本セクションでは、新たなCSSプロパティを用いて段階的なトランジションを指定する方法について説明します。これらのプロパティを用いることで、古い状態から新しい状態への変化を時間をかけてなめらかにアニメーションさせることができます。

たとえば、leftおよびbackground-colorプロパティのトランジションを1秒で定義したとします。下図は、それらのプロパティが更新された場合の効果を示しており、この例では要素が右へ移動し、背景色が赤から青へ変化します。他のトランジションパラメーターはデフォルト値であると仮定しています。

Example showing the initial, intermediate, and final states of a box whose color and position is interpolated
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 リストの長さが トランジション開始時に調べる各リストのアイテム数となります。リストは先頭から対応付けされ、余分な値は無視されます。他のプロパティがtransition-propertyの個数分足りない場合、ユーザーエージェントは値を繰り返して十分にします。 これは格納値(computed value)には影響しません。 注: この動作は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> は、キーワード 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,∞]>#
初期値: 0s
適用対象: 全要素
継承: no
パーセンテージ: N/A
算出値: リスト(各項目が継続時間)
正準順序: 構文ごと
アニメーション型: アニメーション不可
テスト

このプロパティは、値の遷移が完了するまでにかける時間を指定します。初期値は 0s で、遷移は即時(つまりアニメーションなし)となります。transition-duration に負の値を指定すると、その宣言は無効となります。

2.3. transition-timing-function プロパティ

transition-timing-functionプロパティは、 トランジションの中間値の計算方法を記述します。これによってトランジション中に速度変化(イージング)が可能になります。

タイミング関数は、CSS Easing Functionsモジュール [css-easing-1] で定義されています。 使用される 入力進行値 は遷移の所要時間の割合であり、 出力進行値補間時の p として使われます(§ 4 トランジションの適用参照)。

名前: transition-timing-function
値: <easing-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
算出値: リスト(各項目が継続時間)
正準順序: 構文ごと
アニメーション型: アニメーション不可
テスト

2.5. transition ショートハンドプロパティ

transitionショートハンドプロパティは、上記4つのプロパティを1つのプロパティとしてまとめます。

名前: transition
値: <single-transition>#
初期値: 各プロパティ参照
適用対象: 全要素
継承: no
パーセンテージ: N/A
算出値: 各プロパティ参照
アニメーション型: アニメーション不可
正準順序: 構文ごと
テスト
<single-transition> = [ none | <single-transition-property> ] || <time> || <easing-function> || <time>

このプロパティ内では値の順序が重要であり、最初に時間として解釈できる値がtransition-durationに、2番目の時間として解釈できる値がtransition-delayに割り当てられます。

ショートハンド内に複数の<single-transition>があり、そのうちいずれかのトランジションのnone<single-transition-property>として指定された場合、その宣言は無効となります。

3. トランジションの開始

Implementations must maintain a set of 実行中のトランジション, each of which applies to a specific element and non-shorthand property. Each of these transitions also has a 開始時刻, 終了時刻, 開始値, 終了値, 反転調整済み開始値, and 反転短縮係数. Transitions are added to this set as described in this section, and are removed from this set when they 完了 or when implementations are required to キャンセル them. For the rationale behind the 反転調整済み開始値 and 反転短縮係数, see § 3.1 中断されたトランジションのより速い反転.

テスト

Implementations must also maintain a set of 完了したトランジション, each of which (like 実行中のトランジション) applies to a specific element and non-shorthand property. This specification maintains the invariant that there is never both a 実行中のトランジション and a 完了したトランジション for the same property and element.

If an element is no longer in the document, implementations must キャンセル any 実行中のトランジション on it and remove transitions on it from the 完了したトランジション.

この完了したトランジションの集合は、 あるケースでトランジションが繰り返されるのを防ぐために 維持する必要がある、すなわち本仕様が維持しようとする不変条件、 無関係なスタイル変更がトランジションを引き起こさないということを守るためである。

完了したトランジションの集合の維持が必要となる例は、継承されるプロパティのトランジションで、 親がそのプロパティに対してより長い期間のトランジションを指定している場合(たとえば、transition: 4s text-indent) と、親の値を継承する子要素が同じプロパティについてより短い期間のトランジションを指定する場合(たとえば、transition: 1s text-indent)。 完了したトランジション集合を維持していないと、実装は子要素での最初の1秒のトランジションが完了した後に追加のトランジションを開始してしまう可能性がある。

様々な事柄が、要素上のプロパティの 計算済み値 を変化させる可能性がある。 これらには、 ドキュメントツリーへの要素の挿入および削除(これによりその要素が 計算済み値 を持つかどうかが変わり、 セレクタのマッチングを通じて他の要素のスタイルを変えることがある)、 セレクタのマッチングが変わる原因となるドキュメントツリーの変更、 スタイルシートや style 属性の変更、 その他の事柄が含まれる。 本仕様は 計算済み値 がいつ更新されるかを定義していないが、 実装は CSS のカスケード、値の計算、および継承プロセスに起因する何かを [CSS3CASCADE] に基づいて使用、表示、あるいは提示する際に 計算済み値 を更新せずにそれを行ってはならない(これは単に、実装がスタイル変更を扱う過程で 計算済み値 を更新していないと主張することで本仕様の要件を回避してはならない、という意味である)。 しかしながら、 実装が要素上のプロパティの 計算済み値 をこれらの変更のいずれかを反映するように更新する場合、 またはドキュメントに新たに追加された要素のプロパティの 計算済み値 を計算する場合、 それは全てのプロパティと要素の 計算済み値 を同時に反映するように更新しなければならない (少なくとも異なる時刻に行われたことが検出できないこと)。 この一連の同時のスタイル変更の処理を スタイル変更イベント と呼ぶ。 (実装は通常、画面のリフレッシュ率に対応する スタイル変更イベント を持ち、スクリプト API がそれに依存する最新の計算済みスタイルやレイアウト情報を必要とする場合に使用する。)

テスト

本仕様はいつ スタイル変更イベント が発生するかを定義していないため、 どの計算済み値の変更が同時とみなされるかも定義していないことから、 著者は、トランジションに関係する可能性のある変更を行った直後に少しの時間差で transition-* プロパティを変更すると、 実装間で挙動が異なる可能性があることに注意すべきである。というのは、ある実装ではそれらの変更が同時とみなされるが、別の実装ではそうではないかもしれないためである。

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, define the before-change style as the computed values of all properties on the element as of the previous style change event, 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. 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. Note that this means the after-change style does not differ from the before-change style due to newly created or canceled CSS Animations.

テスト

この after-change style の定義は、単一の変更が祖先要素と子孫要素の両方で同じプロパティに対するトランジションを開始できることを意味することに注意する必要がある。 これは、ある要素からのプロパティの変更が、変化するプロパティをアニメートすると指定している transition-* プロパティを持つ要素から別の要素へ継承される場合に発生しうる。

このようなとき、両方のトランジションは実行され、 子孫要素のトランジションが祖先要素のトランジションを上書きする(通常の CSS のカスケードと継承のルールによる)ことになる。

子孫要素のトランジションが祖先のトランジションより先に完了した場合、 子孫要素はその後、(まだトランジション中の)値を親から再び継承するようになる。 この効果は望ましいものではないかもしれないが、本質的には作者が要求した通りの動作をしている。

For each element with a before-change style and an after-change style, and each property (other than shorthands), 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, 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). Define the combined duration of the transition as the sum of max(matching transition duration, 0s) and the matching transition delay.

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.

注: たとえ特定のプロパティ非離散アニメーションタイプを持つと定義されていても、 特定の一対のプロパティ値についてはそのアニメーションタイプ離散になることがある。 例えば、 box-shadow プロパティのアニメーションタイプshadow list であり、 その定義では一方の値に inset キーワードが含まれず、もう一方に含まれる場合には離散なアニメーションが使われるとする。 結果として 0px 0px blackinset 10px 10px blacktransitionable(トランジション可能)ではない。

For each element and property, the implementation must act as follows:

  1. If all of the following are true: then implementations must remove the completed transition (if present) from the set of completed transitions and start a transition whose:
  2. 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.
  3. 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.
  4. 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:
    1. 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 are not transitionable, then implementations must cancel the running transition.
    2. Otherwise, if the combined duration is less than or equal to 0s, or if the current value of the property in the running transition is not transitionable with the value of the property in the after-change style, then implementations must cancel the running transition.
    3. 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:
    4. Otherwise, implementations must cancel the running transition and start a new transition whose:

注: 上記の規則は、可アニメートなプロパティの計算済み値が変化したときに開始されるトランジションが、 その可アニメートプロパティが最初に新しい計算済み値を持つ時点での transition-propertytransition-durationtransition-timing-function、および transition-delay プロパティの値に基づいていることを意味する。 これは、これらの transition-* プロパティのいずれかが、トランジションを引き起こす可能性のあるプロパティの変更と同時に変化した場合、 トランジションに影響するのはそれらの transition-* プロパティの新しい値であることを意味する。

Example(s):

これは、状態間のトランジションにおいて「順方向」と「逆方向」のトランジションのために著者が異なる transition-* の値を指定する方法を提供する(ただし、中断された未完了のトランジションに対する特別な反転挙動については 以下 を参照)。著者は、トランジションを引き起こす値を指定するのと同じルールの中で transition-durationtransition-timing-function、または transition-delay の値を指定することができるし、 トランジションを引き起こすプロパティを変更するときにこれらのプロパティを同時に変更することもできる。これらの transition-* プロパティの新しい値がトランジションに影響するため、これらの値は関連する遷移値へのトランジション(to)に使われる。例えば:

li {
  transition: background-color linear 1s;
  background: blue;
}
li:hover {
  background-color: green;
  transition-duration: 2s; /* applies to the transition *to* the :hover state */
}

これらのスタイルルールを持つリスト項目が :hover 状態に入ると、transition-duration の計算済み値は、その時点で background-color が新しい値(green)を持つ時点で 2s になる、 したがって blue から green へのトランジションは2秒かかる。 しかし、そのリスト項目が :hover 状態を離れると、green から blue へのトランジションは1秒かかる。

注: プロパティのトランジションが一度開始されると(遅延フェーズにある場合も含む)、 トランジションは元のタイミング関数、継続時間、および遅延に基づいて実行され続ける。たとえ transition-timing-functiontransition-duration、または transition-delay プロパティがトランジション完了前に変更されたとしてもである。 ただし、transition-property がトランジションが開始されないように変化した場合、トランジションは停止し(そしてプロパティは直ちに最終値に変わる)。

注: 上記の規則は、宣言的アニメーション(スクリプトによるアニメーションではなく)によってプロパティの計算済み値が変わった場合にはトランジションは開始されないことを意味する。 これは before-change style に宣言的アニメーションの最新のスタイルが含まれているためである。

テスト

3.1. 中断されたトランジションの高速反転

よくあるトランジション効果は2つの状態間のトランジションであり、たとえばユーザーインターフェース要素にマウスポインターが乗り、その後外れるときの遷移などです。 こうした効果では、トランジション実行中に完了前に中断され、プロパティがそのトランジションの開始値にリセットされることが多くあります。 例としては、要素へのホバー効果があり、ポインターが要素に入ったときにトランジションが始まり、効果が完了する前にポインターが要素から出た場合などです。 もし出入り両方のトランジションが指定された継続時間とタイミング関数で実行されると、2回目のトランジションが短い距離を設定された全時間かけて行われるため、視覚的にアンバランスな印象になります。 この仕様では2回目のトランジションをより短くします。

上記規則が利用する仕組みは逆転短縮係数逆転調整開始値です。 特に、逆転動作は逆転短縮係数が1未満の時に発生します。

注: これらの規則は2状態以上を含むトランジションパターンには完全には対応しません。

注: これらの規則は新しいトランジションのタイミング関数全体が用いられ、「途中から」タイミング関数にジャンプしないため、唐突な効果を避けます。

これはワーキンググループで検討された案の1つです。いくつかの案を含むリバーシングデモも参照。最終案は2013-06-07のWG決議と2013-11-11の編集で決定。

4. トランジションの適用

要素のプロパティがトランジション中である場合(つまり、開始された後から終了時刻までの間)、 トランジションは「現値」と呼ばれるスタイルをCSSカスケードに、[CSS3CASCADE]で定義されるレベルで付加します。

テスト

注: これは、CSSトランジションによる算出値も他の算出値同様に子孫要素へ継承されうることを意味します。 通常の場合、継承プロパティのトランジションは子孫要素にも期待通り適用されます。

実装は、同じ要素でそのプロパ���ィがCSS Animation([CSS3-ANIMATIONS])中で「ない」場合にかぎり、この値をカスケードに追加しなければなりません。

注: 同じ要素・プロパティでアニメーション中の場合にトランジションをカスケードに適用しなくとも、それがトランジションの開始/終了には影響しません。 トランジションの状態を報告するAPI(transition events など)は、やはりトランジション中であると報告します。

現在時刻がトランジションの開始時刻と同じかそれ以前(=遅延フェーズ中)なら、現値はトランジションの開始値になるように計算されるスタイルとなります。

現在時刻がトランジションの開始時刻より後(=遷移フェーズ中)なら、現値は以下の値で補間した結果になるように計算されるスタイルとなります。

具体的な補間手順は、そのプロパティのアニメーション型で定義されます。

5. トランジションの完了

稼働中トランジション完了するのは、終了時刻以上かつそれ以降最初のスタイル変更イベントより前の時刻です。 トランジションが完了した際、実装は その時に完了したすべてのトランジションを 稼働中トランジションから 完了済みトランジションのセットへ移動し、 その完了イベントを発火しなければなりません。(注:そうしない場合、つまりイベント発火前に「稼働中→完了済み」への一括移動をしなければ、 イベントハンドラでスタイル変更イベントが生じてしまうと、必要なトランジションが完了せずにスタイル変更イベントが発生する場合があり得ます。)

6. トランジションイベント

CSSトランジションの生成・開始・完了・キャンセル時に、それぞれ対応するDOMイベントを発生させます。 各プロパティごとに、その要素上のトランジションに対応するイベントがディスパッチされます。 これによりコンテンツ制作者がトランジションと同期した動作を行えます。

各イベントは、関連するCSSプロパティ名とトランジションの継続時間も提供します。

テスト

6.1. インタフェース TransitionEvent

TransitionEvent インタフェースはトランジション関連の文脈情報を提供します。

6.1.1. IDL定義

[Exposed=Window]
interface TransitionEvent : Event {
  constructor(CSSOMString type, optional TransitionEventInit transitionEventInitDict = {});
  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疑似要素(“::”で始まる名前)。その場合イベントのターゲットもその疑似要素の対応実体となります。 要素自身で発生した場合は空文字列(ターゲットはその要素)。

TransitionEvent(type, transitionEventInitDict)イベントコンストラクタです。

6.2. TransitionEventの種類

発生しうるトランジションイベントの種類:

transitionrun
transitionrun イベントは、トランジションが生成された(稼働中トランジションに追加された)際に発生します。

transition-delayが負だと、イベントではelapsedTime は遅延の絶対値とアニメーションのtransition-durationのうち小さい方(0以上)です。

  • バブル: あり
  • キャンセル: 不可
  • 文脈情報: propertyName, elapsedTime, pseudoElement
transitionstart
transitionstart イベントはトランジション遅延フェーズ終了時に発生します。

elapsedTime の値はtransitionrunと同じです。

  • バブル: あり
  • キャンセル: 不可
  • 文脈情報: propertyName, elapsedTime, pseudoElement
transitionend
transitionend イベントはトランジション完了時に発生します。トランジションが完了前に除去(たとえばtransition-propertyが除去)されるとイベントは発火しません。

elapsedTimetransition-durationの値です。

  • バブル: あり
  • キャンセル: 不可
  • 文脈情報: propertyName, elapsedTime, pseudoElement
テスト
transitioncancel
transitioncancel イベントはトランジションがキャンセルされた際に発生します。

elapsedTime は、遅延終了からキャンセルまでの秒数です。 負のtransition-delayの場合、 トランジション開始は「実際のトリガより前へ絶対値(秒)さかのぼった」時扱いとなります。 正のtransition-delayで遅延中にイベントが発火した場合、 elapsedTimeは0となります。

  • バブル: あり
  • キャンセル: 不可
  • 文脈情報: propertyName, elapsedTime, pseudoElement
テスト

6.3. 要素・DocumentWindowオブジェクト上のイベントハンドラ

以下は、すべてのHTML要素イベントハンドラ内容属性およびイベントハンドラIDL属性としてサポートし、 Document および WindowイベントハンドラIDL属性としてサポートする必要があるイベントハンドラ(およびそれに対応するイベントタイプ):

イベントハンドラ イベントハンドライベントタイプ
ontransitionrun transitionrun
ontransitionstart transitionstart
ontransitionend transitionend
ontransitioncancel transitioncancel

7. DOMインタフェース

この仕様では、HTMLのGlobalEventHandlers インタフェースミックスインを拡張し、イベントハンドラIDL属性としてトランジションイベント用を追加します(§6.3参照)。

7.1. IDL定義

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

8. セキュリティに関する考慮事項

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

この仕様のセキュリティへの影響は限定的です。なぜならWebコンテンツがこれまでできなかったことを可能にするわけではなく むしろスクリプトで実現できていたことを宣言的な形で、かつ実装が(CPUやフレームレートに最適化できる)方法でできるようにするだけです。

実装が得られる主な最適化手法のひとつは、transformopacityなど特定の重要プロパティのアニメーションを、 ウェブコンテンツのメインスレッドでスタイルやレイアウトの再計算を走らせず、ブラウザのコンポジタースレッド/プロセス上で実行することです(必要な場合のみ最新スタイル情報を取得して反映)。 この最適化には、アニメーション要素の内容の描画用グラフィックメモリ割り当ても頻繁に必要となります。 実装は、多数のアニメーションや巨大な領域(事前または変形後いずれか)をカバーするアニメーションによって 危険なメモリ不足動作をユーザーが誘発できないよう注意すべきです。

9. プライバシーに関する考慮事項

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

セキュリティと同様、この仕様によるプライバシーへの新たな懸念も基本的にありません。

ただし本仕様は、ユーザーのハードウェアやソフトウェア特性を推測する新たな手段を与える場合もあり得ます。 しかしユーザー環境の性能推定自体は多くのWeb技術に共通であり、 本仕様が新たな手段を導入するということはありません。

§10 アクセシビリティの考慮事項で述べたように、 実装は支援機能を有効化したユーザー向けの緩和策を提供する場合があります。 これらの措置はWebコンテンツ側でも検出できる可能性があり、 利用者が緩和策による利益と 障害をWebコンテンツに知られるリスクの間で相反を迫られることもありえます。

10. アクセシビリティに関する考慮事項

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

10.1. 動き

この仕様は、従来スクリプトで指定していたアニメーションに対し宣言的な仕組みを提供します。 宣言的手段にすることで、アニメーションを制作しやすくなり、その結果一般的になりやすくなりますが、 同時にユーザーエージェントが必要に応じてこうしたアニメーションをユーザーのアクセシビリティニーズに合わせて調整しやすくなります。

そのため、動きに敏感なユーザーや、内容の理解や読解に時間がかかるユーザーの場合は アニメーションの無効化や減速を可能にするUA機能によるメリットが得られます。 (ただしこのような緩和策でプライバシーへの影響については§9を参照)

UA実装者は、Webコンテンツがトランジションイベントの発火に依存している場合があることに留意すべきであり、 たとえトランジションが連続アニメーションとして実行されなくても、イベントは発火した方がよいこともあります。 ただし、そうしたイベント依存のWebコンテンツは正しい実装(ベストプラクティス)ではありません。

10.2. カスケード

CSSのカスケード機構は、ユーザーニーズと著者スタイルとの相互作用を可能にします。 本仕様はカスケードと連携しますが、 既存カスケード規則結果間のみでアニメーションするため、 ユーザーがプロパティ値の強制指定を妨げません。

カスケード機構により、transition系プロパティを上書きすればトランジション全体を無効化することも可能です。

11. 変更点

11.1. 2018年10月11日作業草案からの変更点

次は、2018年10月11日付 作業草案以降に加えられた実質的な変更点です:

これらの変更の詳細は、バージョン管理の変更ログを参照してください。

11.2. それ以前の変更点

これ以前の作業草案での変更:

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

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

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

  4. 以前の作業草案のChangeLogを参照。

  5. これらの変更について詳細は、ファイル名変更のため複数に分かれたバージョン管理の変更ログを参照:

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" によって規範文から区別されます。例:

Note, this is an informative note.

勧告は規範部の中でも特別な注意を促すために表示され、<strong class="advisement">(例: UAs MUST provide an accessible alternative.)でマークされます。

テスト

この仕様の内容に関連するテストは、このような “Tests” ブロックで示されています。 このブロックはすべて非規範です。


適合クラス

本仕様への適合性は、次の3つの適合クラスごとに規定されます:

スタイルシート
CSSスタイルシート
レンダラー
スタイルシートの意味を解釈して、それを用いた文書をレンダリングするUA
オーサリングツール
スタイルシートを生成するUA

スタイルシートは、このモジュールで定義された構文を使う記述が、CSS汎用文法および本モジュールで定める各機能の個別文法に従い正しい場合、本仕様に適合します。

レンダラーは、本仕様で定めるすべての機能を正しくパースし、規定によってレンダリングされる場合、かつスタイルシート自体の解釈について適切な仕様に従う場合に限って本仕様に適合します。ただし、UAのデバイス制限による正しい描画の不能(例:モノクロモニターで色表示ができない等)は非適合とはなりません。

オーサリングツールは、CSS汎用文法および本モジュールの各機能の文法に従ったスタイルシートを書き出しており、かつ本モジュールで定める他のすべてのスタイルシート適合要件を満たす場合、本仕様に適合します。

部分的な実装

著者が前方互換なパース規則を利用してフォールバック値を指定できるよう、CSSレンダラーは、自身が有用なサポートレベルを持たない@規則、プロパティ、プロパティ値、キーワードその他構文構成要素を無効として(必要に応じて無視)扱う必要があります。特に、ユーザーエージェントは サポートしていない部分値だけを選択的に無視し、サポート済み値だけ有効化することはできません。1つの宣言でいずれかの値が無効(サポート外)であれば、その宣言全体が無視されます。

不安定および専用機能の実装

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

非実験的な実装

仕様が候補勧告段階に到達したら、非実験的な実装が可能となり、実装者は仕様に準拠することを証明できるCRレベル機能について、プレフィックスなしでリリースする必要があります。

CSSの相互運用性を確立・維持するため、CSSワーキンググループは、非実験的なCSSレンダラーに対し、任意のCSS機能のプレフィックスなし実装リリース前に実装報告書(必要であれば関連テストケースも)をW3Cへ提出するよう要請します。W3Cへ提出されたテストケースはワーキンググループで精査・修正の対象となります。

テストケース・実装報告書提出案内はCSSワーキンググループWebサイト https://www.w3.org/Style/CSS/Test/ に掲載されています。 質問は public-css-testsuite@w3.org メーリングリストへどうぞ。

索引

本仕様で定義される用語

参照で定義される用語

参考文献

標準参考文献

[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS Cascading and Inheritance Level 5. 2022年1月13日 CR. URL: https://www.w3.org/TR/css-cascade-5/
[CSS-CASCADE-6]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS Cascading and Inheritance Level 6. 2024年9月6日 WD. URL: https://www.w3.org/TR/css-cascade-6/
[CSS-COLOR-4]
Chris Lilley; Tab Atkins Jr.; Lea Verou. CSS Color Module Level 4. 2025年4月24日 CRD. URL: https://www.w3.org/TR/css-color-4/
[CSS-EASING-1]
Brian Birtles; Dean Jackson; Matt Rakow. CSS Easing Functions Level 1. 2023年2月13日 CRD. URL: https://www.w3.org/TR/css-easing-1/
[CSS-EASING-2]
CSS Easing Functions Level 2. 2024年8月29日 FPWD. URL: https://www.w3.org/TR/css-easing-2/
[CSS-TRANSFORMS-1]
Simon Fraser; 他. CSS Transforms Module Level 1. 2019年2月14日 CR. URL: https://www.w3.org/TR/css-transforms-1/
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. 2024年3月22日 CRD. URL: https://www.w3.org/TR/css-values-3/
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. 2024年3月12日 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]
David Baron; 他. CSS Animations Level 1. 2023年3月2日 WD. URL: https://www.w3.org/TR/css-animations-1/
[CSS3CASCADE]
Elika Etemad; Tab Atkins Jr.. CSS カスケードおよび継承 レベル3. 2021年2月11日 REC. URL: https://www.w3.org/TR/css-cascade-3/
[CSSOM-1]
Daniel Glazman; Emilio Cobos Álvarez. CSS Object Model (CSSOM). 2021年8月26日 WD. URL: https://www.w3.org/TR/cssom-1/
[DOM]
Anne van Kesteren. DOM標準. Living Standard. URL: https://dom.spec.whatwg.org/
[HTML]
Anne van Kesteren; 他. HTML標準 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://datatracker.ietf.org/doc/html/rfc2119
[WEB-ANIMATIONS-1]
Brian Birtles; 他. Web Animations. 2023年6月5日 WD. URL: https://www.w3.org/TR/web-animations-1/
[WEBIDL]
Edgar Chen; Timothy Gu. Web IDL標準. Living Standard. URL: https://webidl.spec.whatwg.org/

参考情報文献

[CSS-BACKGROUNDS-3]
Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. 2024年3月11日 CRD. 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 アニメーション不可 構文ごと 各プロパティ参照
transition-delay <time># 0s 全要素 no N/A アニメーション不可 構文ごと リスト、各項目は継続時間
transition-duration <time [0s,∞]># 0s 全要素 no N/A アニメーション不可 構文ごと リスト、各項目は継続時間
transition-property none | <single-transition-property># all 全要素 no N/A アニメーション不可 構文ごと キーワード none あるいは識別子リスト
transition-timing-function <easing-function># ease 全要素 no N/A アニメーション不可 構文ごと 指定通り

IDL索引

[Exposed=Window]
interface TransitionEvent : Event {
  constructor(CSSOMString type, optional TransitionEventInit transitionEventInitDict = {});
  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 mixin GlobalEventHandlers {
  attribute EventHandler ontransitionrun;
  attribute EventHandler ontransitionstart;
  attribute EventHandler ontransitionend;
  attribute EventHandler ontransitioncancel;
};