view-transition-group 不是合法属性或选择器；它源于对 View Transitions API 的误解，该 API 仅支持 view-transition-name 属性和 ::view-transition-old()/::view-transition-new() 伪元素，须用 @keyframes + animation 控制动画。

view-transition-group 不是标准 HTML 或 CSS 中的合法属性或选择器，它根本不存在。你可能混淆了几个概念：CSS 的 transition、@keyframes + animation，以及 Chrome 111+ 引入的实验性新特性 —— View Transitions API（注意：它没有 -group 后缀，也不通过 CSS 类名或 HTML 属性配置）。

---

为什么 view-transition-group 会让人误以为存在？

部分开发者看到类似写法，比如：

<div view-transition-name="title">...</div>

或在 DevTools 中看到浏览器自动生成的伪元素类名如 view-transition-group，误以为这是可手动设置的 CSS 类。实际上：

• view-transition-name 是一个HTML 全局属性（仅限 Chrome/Edge Canary），用于标记参与视图过渡的元素；
• 浏览器内部会生成临时的伪元素（如 ::view-transition-old(title) 和 ::view-transition-new(title)），但不暴露 view-transition-group 这类选择器供开发者直接使用；
• 所有动画控制必须通过 CSS 的 @keyframes + animation，作用于这些伪元素。

---

如何真正控制 View Transition 的持续时间与缓动曲线？

你需要用 CSS 为浏览器生成的伪元素显式定义 animation，其中包含：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

立即学习“前端免费学习笔记（深入）”；

• animation-duration（替代 transition-duration）
• animation-timing-function（即“持续时间曲线”）

例如：

::view-transition-old(title),
::view-transition-new(title) {
  animation: slide-fade 300ms ease-out;
}

@keyframes slide-fade {
  from {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateX(-20px) scale(0.98);
    opacity: 0.7;
  }
}

关键点：

• 必须用 ::view-transition-old(...) 和 ::view-transition-new(...) 伪元素选择器，不能用自定义类名或 view-transition-group
• animation 是唯一生效的方式；transition 在 view transition 场景下完全无效
• ease-out、cubic-bezier(0.2, 0, 0.1, 1) 等 timing function 可照常使用，但必须写在 @keyframes 规则外的 animation 声明中

---

容易踩的坑

• 直接写 .my-group { view-transition-group: ... } → 语法错误，CSS 解析失败
• 试图给 view-transition-name 元素本身加 transition → 不触发视图过渡动画，只影响常规状态切换
• 忘记加 view-transition-name 属性 → 浏览器不识别该元素参与过渡，伪元素根本不会生成
• 在非 Chromium 浏览器（如 Firefox、Safari）中启用该特性 → 当前（2026 年 5 月）仍无支持，代码会被忽略

View Transitions API 的动画控制权不在传统 CSS transition 上，而在于你能否精准命中那些由浏览器动态创建的伪元素，并用 animation 替代一切。