::view-transition-group
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-group CSS 伪元素表示单个视图过渡组。
在视图过渡期间，::view-transition-group 包含在相关的伪元素树上，如视图过渡过程中所述。它只能是 ::view-transition 的子节点，并且有一个 ::view-transition-image-pair 子节点。
::view-transition-group 在 UA 样式表中具有以下默认样式：
html::view-transition-group(*) { position: absolute; top: 0; left: 0; animation-duration: 0.25s; animation-fill-mode: both; } 默认情况下，该元素最初会镜像表示 ::view-transition-old 伪元素的大小和位置，即旧视图状态。如果没有旧视图状态，则会镜像表示 ::view-transition-new 伪元素的大小和位置，即新视图状态。
如果同时存在新旧两种视图状态，则视图过渡样式表中的样式会将该伪元素的 width 和 height 从旧视图状态的边框盒大小动画到新视图状态的边框盒大小。
此外，元素的变换是从旧视图状态的屏幕空间，变换到新视图状态的屏幕空间。由于动画属性的值是在过渡开始时确定的，因此此样式是动态生成的。
语法
::view-transition-group(<pt-name-selector>) { /* ... */ } <pt-name-selector> 可以是以下任何值之一：
*-
使伪元素选择器匹配所有视图过渡组。
root-
使伪元素选择器匹配由 UA 创建的默认
root视图过渡组，该组用于包含整个页面的视图过渡，这意味着任何未通过view-transition-name属性分配给特定视图过渡组的元素。 <custom-ident>-
使伪元素选择器匹配（通过
view-transition-name属性将<custom-ident>分配给元素而创建的）特定视图转换组。
示例
view-transition-group(embed-container) { animation-duration: 0.3s; animation-timing-function: ease; z-index: 1; } 规范
| Specification |
|---|
| CSS View Transitions Module Level 1 # ::view-transition-group |