::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.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
::view-transition-image-pair は CSS の擬似要素で、ビュー遷移の「古い」および「新しい」ビュー状態、すなわちトランジションの前と後のコンテナーを表します。
ビュー遷移の間、 ::view-transition-image-pair はビュー遷移のプロセスで説明されているように、関連する擬似要素のツリーとして表現されます。これは ::view-transition-group の子にしかなりません。子という意味では、 ::view-transition-new または ::view-transition-old、あるいはその両方を持つことができます。
UA スタイルシートでは ::view-transition-image-pair に以下の既定値が指定されています。
html::view-transition-image-pair(*) {
position: absolute;
inset: 0;
animation-duration: inherit;
animation-fill-mode: inherit;
}
ビュー遷移の間、 ::view-transition-image-pair は isolation: isolate をビュー遷移スタイルシートで設定することで、他の視覚出力に影響を与えることなく、通常の混合モード以外で混合することができます。
構文
::view-transition-image-pair(<pt-name-selector>) {
/* ... */
}
<pt-name-selector> は以下の値のうちのいずれかです。
*-
擬似要素が、すべてのビュー遷移グループに一致するようにします。
root-
擬似要素が、ページ全体のビュー遷移を含むためにユーザーエージェントによって作成された既定の
rootビュー遷移グループに一致するようにします。すなわち、view-transition-nameプロパティによって自分自身を固有のビュー遷移グループに割り当てていない要素を意味します）。 <custom-ident>-
擬似要素が、指定された
<custom-ident>をview-transition-nameプロパティを通して要素に割り当てることによって作成された固有のビュー遷移グループに一致するようにします。
例
::view-transition-image-pair(root) {
isolation: auto;
}
仕様書
| Specification |
|---|
| CSS View Transitions Module Level 1 # ::view-transition-image-pair |
ブラウザーの互換性
Loading…