此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
::view-transition-image-pair
Baseline 2025Newly 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-pairCSS伪元素表示一个视图过渡的旧视图状态和新视图状态的容器——即过渡前和过渡后的状态。
在视图过渡期间，::view-transition-image-pair 包含在相关的伪元素树上，如视图过渡过程中所述。它只能是::view-transition-group 的子节点。并且可以有一个::view-transition-new 或一个::view-transition-old 子节点，亦或是两者都有。
::view-transition-image-pair 在 UA 样式表中具有以下默认样式：
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使伪元素选择器匹配由 UA 创建的默认
root视图过渡组，该组用于包含整个页面的视图过渡，这意味着任何未通过view-transition-name属性分配给特定视图过渡组的元素。<custom-ident>使伪元素选择器匹配（通过
view-transition-name属性将<custom-ident>分配给元素而创建的）特定视图转换组。
示例
::view-transition-image-pair(root) { isolation: auto;}规范
| Specification |
|---|
| CSS View Transitions Module Level 1 # ::view-transition-image-pair |