CSSトランジション レベル2

1. デルタ仕様

これはデルタ仕様であり、現在は CSS Transitions Level 1 [CSS-TRANSITIONS-1] からの差分のみを含みます。 Level 1 の仕様が完成に近づいた段階で、ここでの追加内容と統合され、完全な Level 2 仕様となります。

2. トランジション

2.1. transition-property プロパティ

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

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

transitionable の定義インスタンスを Level 1 から移植した際に更新してください。

CSS Transitions Level 2 では、あるプロパティの before-change style と after-change style を比較する際、 そのプロパティ値が以下の場合 transitionable となります:

1. animation type が not animatable でも discrete でもない場合、または
2. transition-behavior が allow-discrete であり、animation type が discrete の場合

注: discrete な animation type の値がトランジションされる場合、進捗の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’より前）。

本仕様で定義されたマークアップから生成されたトランジションは、作成時にはグローバルアニメーションリストに追加されません。 代わりに、これらのアニメーションが所有要素から切り離された後、idle再生状態から抜け出した瞬間にグローバルアニメーションリストに追加されます。 所有要素から切り離されたが、まだ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. レベル1以降、初公開作業草案での変更

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

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

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

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

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