::view-transition-image-pair()
Baseline
2025
Newly available
Since October 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
::view-transition-image-pair() は CSS の擬似要素で、ビュー遷移の「古い」および「新しい」ビュー状態、すなわちトランジションの前と後のコンテナーを表します。
ビュー遷移の間、 ::view-transition-image-pair() はビュー遷移のプロセスで説明されているように、関連する擬似要素のツリーとして表現されます。これは ::view-transition-group() の子にしかなりません。子という意味では、 ::view-transition-new() または ::view-transition-old()、あるいはその両方を持つことができます。
::view-transition-image-pair() は UA スタイルシートで以下のデフォルトのスタイルを与えられています。
:root::view-transition-image-pair(*) {
position: absolute;
inset: 0;
animation-duration: inherit;
animation-fill-mode: inherit;
animation-delay: inherit;
}
ビュー遷移の間、 ::view-transition-image-pair() は isolation: isolate をビュー遷移スタイルシートで設定することで、他の視覚出力に影響を与えることなく、通常の混合モード以外で混合することができます。
構文
::view-transition-image-pair([ <pt-name-selector> <pt-class-selector>? ] | <pt-class-selector>) {
/* ... */
}
引数
*-
全称セレクター (
*)です。ページ上のすべてのビュー遷移グループを選択します。 root-
擬似要素が、ページ全体のビュー遷移を含むためにユーザーエージェントによって作成されたデフォルトの
rootビュー遷移グループに一致するようにします。すなわち、view-transition-nameプロパティによって自分自身を固有のビュー遷移グループに割り当てていない要素を意味します）。 <pt-name-selector>-
一連の
<custom-ident>で、view-transition-nameプロパティの値です。 <pt-class-selector>-
一連の
<custom-ident>で、view-transition-classプロパティの値の前にピリオド (.) を置いたものです。
例
::view-transition-image-pair(root) {
isolation: auto;
}
::view-transition-image-pair(.card) {
isolation: isolate;
}
仕様書
| Specification |
|---|
| CSS View Transitions Module Level 1 # ::view-transition-image-pair |