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

1. デルタ仕様

これはデルタ仕様です。つまり、現時点では CSS Transitions Level 1 [CSS-TRANSITIONS-1] からの差分のみが記載されています。Level 1 の仕様がより完成に近づいた際には、ここでの追加内容と統合され、完全なレベル2仕様になります。

2. トランジション

2.1. transition-property プロパティ

CSS Transitions 1 § 2.1 transition-property プロパティ からテキストを挿入し、以下の段落をバックポートしてください。

transition-property にはショートハンドプロパティや all キーワードを指定できますが、個別のトランジションは 各ロングハンドの トランジション可能なサブプロパティごとに生成されます。トランジションの 展開されたトランジションプロパティ名 とは、そのトランジションが生成される ロングハンドサブプロパティの名前です（例: border-left-width）。

transitionable の定義箇所はLevel 1から取り込まれ次第、更新してください。

CSS Transitions Level 2 では、あるプロパティに対して 変更前スタイルと 変更後スタイル を比較する際、以下のいずれかに該当する場合はその値を トランジション可能とみなします:

1. アニメーション型 が 非アニメーション および 離散 のいずれでもない場合
2. transition-behavior が allow-discrete であり、かつ アニメーション型 が 離散 である場合

注記: 離散な アニメーション型の値がトランジションするとき、それらは進捗50%で切り替わります。

2.2. transition-duration プロパティ

transition-duration プロパティは、トランジションに関連する 反復期間 を指定します。

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

transition-timing-function プロパティは、トランジションに関連する イージング関数 を指定します（Web Animations § 4.10 時間変換 参照）。

注: CSSアニメーションとは異なり、CSSトランジションのタイミング関数は個々のキーフレームではなくアニメーション効果に適用されます。これにより、反転短縮係数の計算時に 変換された進捗 に反映できます。

2.4. transition-delay プロパティ

transition-delay プロパティは、トランジションに関連する 開始遅延 を指定します。

2.5. transition-behavior プロパティ

transition-behavior プロパティは、離散プロパティに対してトランジションを開始するかどうかを指定します。

transition-behavior の指定構文は以下の通りです:

normal が指定された場合、離散プロパティにはトランジションは開始されず、補間可能プロパティのみがトランジションされます。allow-discrete が指定された場合、離散プロパティにも補間可能プロパティにもトランジションが開始されます。

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

transition ショートハンドで項目を指定する構文は次のとおりです：

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

所有要素 とは、transition-property プロパティが適用された、アニメーションを生成した要素や疑似要素を指します。 トランジションは 所有要素 から切り離され、所有要素 を持たなくなる場合があります。

実行中のトランジション の集合には、 所有要素 を持つトランジションのみが含まれます。

実装が トランジションをキャンセル する必要がある場合、 トランジションを 所有要素 から切り離し、トランジション上で アニメーションをキャンセルする手順を実行しなければなりません。

この仕様の Level 1 では明確に定義されていませんが、 接続されていない要素でトランジションをキャンセルすることに加え、 実装は レンダリングされていない要素上の実行中のトランジションもキャンセルする必要があり、 それらのトランジションを 完了したトランジション の集合からも削除しなければなりません。

cancel() メソッドを CSSTransition オブジェクト（実行中のトランジションを表す）に対して呼び出しても、 トランジションが 所有要素 から切り離されることはありません。

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

反転短縮係数および反転調整開始値は、正しい反転挙動を生成するためにトランジション自体に関連付けられます（例えば、アニメーション効果などには関連しません）。 その結果、トランジションは逆転時にもこれらの値を使用し、たとえトランジションに関連付けられたアニメーション効果がWeb Animations API [WEB-ANIMATIONS]によって更新・置換されていても同様です。

3.2. 現在のトランジション世代

各トップレベル閲覧コンテキストには、現在のトランジション世代が関連付けられており、スタイル変更イベントごとにインクリメントされます。

新しいトランジションが生成されるたびに、（すでにインクリメントされた）現在のトランジション世代の値が、そのトランジションのトランジション世代として保存されます。

3.3. 変更前スタイルの定義: @starting-style規則

この仕様のLevel 1では、トランジションはスタイル変更イベント時のみ、前回の変更前スタイルが定義されている要素で開始できます。つまり、前回のスタイル変更イベントでレンダリングされていなかった要素にはトランジションを開始できません（CSS Transitions § 3 トランジションの開始参照）。

新たに挿入された要素や、レンダリングされていない状態からレンダリングされる状態に変化した要素にもトランジションを開始したい場合があります。これを可能にするため、本仕様では@starting-styleを導入しています。

@starting-style規則はグループ化規則です。その内部のスタイル規則は、前回のスタイル変更イベントで要素に変更前スタイルが確立されなかった場合に、トランジション元のスタイルを確立するために用いられます。

注: @starting-style規則は、計算スタイルの更新時に、前回のスタイル変更イベントでレンダリングされていなかった、またはDOMに存在しなかった要素のみに適用されます。

要素の開始スタイルは、変更後スタイルに@starting-style規則を追加適用したものと定義します。ある要素が特定の変更前スタイルを持たない場合、開始スタイルが変更後スタイルとの比較に用いられ、トランジションが開始されます（CSS Transitions § 3 トランジションの開始）。

@starting-style 内の規則は他のグループ化スタイル規則と同様にカスケードされ、新たな順序付けは導入されません。つまり、@starting-style内の規則が外部の規則より必ず優先されるとは限りません。

@starting-style内のスタイル規則は変更後スタイルには適用されません。 そのため、@starting-style内で一致する規則が存在すると、通常は変更前スタイルがないためトランジションできなかった要素にもトランジションが発生します。

開始スタイルは、変更後スタイルと同様に親の変更後スタイルを継承します。

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

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

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

グローバルな名前定義at規則（@keyframes、@font-face、@layerなど）は@starting-style内で利用可能であり、存在する場合は@starting-style外と同様に振る舞います。

3.3.1. CSSStartingStyleRule インターフェース

CSSStartingStyleRuleインターフェースは@starting-style規則を表します。

[Exposed=Window]
interface CSSStartingStyleRule : CSSGroupingRule {
};

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

4.1. アニメーション合成順序

本仕様で定義されたマークアップから生成されるアニメーションは、‘CSS Transition’というアニメーションクラスを持ちます。

CSSトランジションは、CSSアニメーションや特定のアニメーションクラスを持たないアニメーションより前の合成順序となります。

CSSトランジションの集合内で、2つのアニメーションAとBの合成順序（先→後）は次の通りです:

1. どちらも所有要素を持たない場合、 グローバルアニメーションリスト内での相対位置でソートします。

2. 一方のみが所有要素を持つ場合、所有要素を持つ方を先にします。

3. AとBの所有要素が異なる場合、それぞれの所有要素のツリー順でソートします。 疑似要素については、次の順序で並びます:

   • 要素

   • ::marker

   • ::before

   • このリストに明記されていないその他の疑似要素（各セレクターのUnicodeコードポイント昇順）

   • ::after

   • 要素の子

4. AとBのトランジション世代値が異なる場合、対応するトランジション世代昇順でソートします。

5. それ以外の場合、AとBの展開されたトランジションプロパティ名のUnicodeコードポイント昇順でソートします（大文字小文字変換せず、‘-moz-column-width’が‘column-width’より前）。

いずれか一方または両方のイベントが transitioncancel イベントである場合に トランジションイベントのソートのためにコンポジット順序を決定するときは、 トランジションのキャンセル直前に設定されていた所有要素および トランジション生成世代 を使用すること。

本仕様で定義されたマークアップを使用して生成されたトランジションは、 作成時にはグローバルアニメーションリストに追加されない。 代わりに、それらのアニメーションは グローバルアニメーションリストに 所有要素から切り離された後、 未再生（idle）状態 から遷移した最初の瞬間に追加される。 所有要素から切り離されたが、まだ未再生 のままのトランジションには、コンポジット順序は定義されない。

注記: この挙動は、トランジションが 所有要素 から切り離されると必ず 未再生（idle）状態になる（または留まり続ける）ことに依存する。

4.2. アニメーションカスケードレベル

‘CSS Transition’ の アニメーションクラス を持ち、かつ 所有要素 を持つアニメーションは、 CSSカスケードの「Transitions宣言」レベルに適用されます。 本仕様で定義されたマークアップから生成された他の全てのアニメーション（所有要素を持たないアニメーションも含む）は、 カスケードの「Animation宣言」レベルに適用されます。 （Web Animations § 5.4.5 合成結果の適用 を参照。）

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

5.1. イベントのディスパッチ

注記：これは、より一般的なイベントディスパッチの記述であり、CSS Transitions Level 1 [CSS-TRANSITIONS-1] のものよりも広くなっています。 なぜなら、Web Animations API [WEB-ANIMATIONS] を使って アニメーションがシークされたりリバースされたりする可能性を考慮する必要があるからです。 さらに、Web Animations API を使うことで トランジション効果を全く異なる効果（例えば複数回繰り返す効果など、通常トランジションで使われないプロパティを持つもの）に 置き換えることも可能であるため、本節ではWeb Animationsモデルの複雑性全体を考慮した汎用的な定義を提供しています。

トランジションイベントのターゲットは、トランジションの所有要素です。 所有要素がない場合、トランジションイベントはディスパッチされません （ただし、Web Animationsで定義されているアニメーション再生イベントは該当するCSSTransitionオブジェクトでディスパッチされます）。

冗長なイベント発火を避けるため、ディスパッチするイベントのセットは、前回と今回のトランジションフェーズの比較に基づきます。

トランジションのトランジションフェーズは初期状態で「idle」となり、 以降は各アニメーションフレームごとに、以下の最初に一致する条件に従って更新されます:

トランジションに関連効果がない場合

トランジションフェーズは、以下の最初に一致する条件で決定されます:

トランジションが未解決の現在時刻を持つ場合

トランジションフェーズは「idle」。

現在時刻が0未満の場合

トランジションフェーズは「before」。

それ以外の場合

トランジションフェーズは「after」。

トランジションが再生保留タスクまたは一時停止保留タスクを持ち、フェーズが直前「idle」または「pending」の場合

トランジションフェーズは「pending」。

それ以外の場合

トランジションフェーズは関連効果のフェーズとなる。

各イベントのelapsedTime計算には、以下の定義が使用されます:

• インターバル開始 = max(min(-start delay, active duration), 0)

• インターバル終了 = max(min(associated effect end - start delay, active duration), 0)

上記の式の開始遅延、アクティブ期間、現在イテレーション、イテレーション開始、イテレーション期間は、 トランジションの関連効果の対応するプロパティを指します。

新しいアニメーションフレームが確立されるたび、 前回と今回のトランジションフェーズの比較に基づき、ディスパッチするイベントが決定されます:

٭ 状態変化に複数イベントが列挙されている場合、すべてのイベントは記載順に連続して即座にディスパッチされます。

上記の表や手順で定義されている経過時間はミリ秒単位であるため、elapsedTimeメンバーに秒単位で代入するには1,000で割る必要があります。 TransitionEventに割り当てる際は、秒単位に変換してください。

6. DOMインターフェース

6.1. CSSTransitionインターフェース

[Exposed=Window]
interface CSSTransition : Animation {
  readonly attribute CSSOMString transitionProperty;
};

transitionProperty, 型 CSSOMString, 読み取り専用

このトランジションの展開されたトランジションプロパティ名。

6.2. 保留中のスタイル変更に関する要件

さまざまな操作により、要素のプロパティの算出値が影響を受ける場合があります。ユーザーエージェントは、最適化のため、これらの値の再計算を必要になるまで遅延させることがあります。 しかし、本仕様で定義されるプログラミングインターフェースに含まれるすべての操作、およびWeb Animations [WEB-ANIMATIONS]で定義され、本仕様で定義されたオブジェクトを返す可能性のある操作は、 保留中の算出値の変更が完全に処理された状態と一致する結果を生成しなければなりません。

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

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

本仕様に関する新たなプライバシー考慮事項は報告されていません。

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

本仕様に関する新たなセキュリティ考慮事項は報告されていません。

9. 変更点

9.1. 2023年9月5日の最初のパブリックワーキングドラフト以降の変更点

• transitioncancel イベントの順序を定義しました。（issue #11064を参照）

9.2. レベル1以降、最初のパブリックワーキングドラフトまでの変更点

• トランジションが離散的にアニメーション可能なプロパティにも発生できるようになりました。 新しく導入されたtransition-behaviorプロパティによって この挙動を選択できます。
• @starting-styleルール （およびCSSStartingStyleRule インターフェイス） が導入され、 表示されていなかった状態から表示される状態へスタイルが変化する要素でも トランジションを可能にします。
• Web Animations API との相互作用がより明確に規定されました：
  • CSSTransition インターフェイスが定義されました。
  • 生成されたアニメーションのコンポジット順序が定義されました。
  • 生成されたアニメーションのアニメーションクラスが定義されました。
  • トランジションから作成され、その後Web Animations APIによって再利用されたアニメーションオブジェクトのカスケードレベルと、それを定義するために必要な所有要素の概念が定義されました。
  • アニメーションがWeb Animations APIでシークまたはリバースされた場合のイベントディスパッチのルールが規定されました。
  • Web Animations APIが中断されたトランジションの高速リバース規則とどう相互作用するかが定義されました。
  • § 6.2 ペンディングスタイル変更の要件が規定されました。
• もはや表示されていない要素のトランジション処理が より明確に定義されました （トランジションはキャンセルされ、 完了したトランジションのセットから削除されます）。

10. 過去のレベルで頻繁に提起された課題

これらの課題は、前のレベルの仕様で頻繁に報告された課題です。

11. 仕様の過去のレベルから持ち越された課題

これらの課題は、以前のレベルの仕様に含まれていましたが、本レベルでも重要でない可能性があります。