::view-transition-image-pair

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

::view-transition-image-pair は CSS の擬似要素で、ビュートランジションの「古い」および「新しい」ビュー状態、すなわちトランジションの前と後のコンテナーを表します。

ビュートランジションの間、 ::view-transition-image-pair はビュートランジションのプロセスで説明されているように、関連する擬似要素のツリーとして表現されます。これは ::view-transition-group の子にしかなりません。子という意味では、 ::view-transition-new または ::view-transition-old、あるいはその両方を持つことができます。

UA スタイルシートでは ::view-transition-image-pair に以下の既定値が指定されています。

css
html::view-transition-image-pair(*) {
  position: absolute;
  inset: 0;

  animation-duration: inherit;
  animation-fill-mode: inherit;
}

ビュートランジションの間、 ::view-transition-image-pair は isolation: isolate をビュートランジションスタイルシートで設定することで、他の視覚出力に影響を与えることなく、通常の混合モード以外で混合することができます。

構文

css
::view-transition-image-pair(<pt-name-selector>) {
  /* ... */
}

<pt-name-selector> は以下の値のうちのいずれかです。

*

擬似要素が、すべてのビュートランジショングループに一致するようにします。

root

擬似要素が、ページ全体のビュートランジションを含むためにユーザエージェントによって作成された既定の root ビュートランジショングループに一致するようにします。すなわち、 view-transition-name プロパティによって自分自身を固有のビュートランジショングループに割り当てていない要素を意味します）。

<custom-ident>

擬似要素が、指定された <custom-ident> を view-transition-name プロパティを通して要素に割り当てることによって作成された固有のビュートランジショングループに一致するようにします。

例

css
::view-transition-image-pair(root) {
  isolation: auto;
}

仕様書

Specification
CSS View Transitions Module Level 1
# ::view-transition-image-pair

ブラウザーの互換性

BCD tables only load in the browser

関連情報