你以为 MPA 跳转只能忍着白屏？CSS View Transitions 把这件事彻底变了

做过静态站的人都懂这个感觉——从首页跳到详情页，从列表页点进文章，浏览器啪一下白屏，然后新页面出现。用户体验断层明显，但为了这点过渡动画上整套 SPA 框架，又觉得杀鸡用牛刀。

这个问题 CSS View Transitions Module Level 2 彻底原生化了。

方案：一行 CSS 解决跨文档跳转动画

以前想要页面间平滑过渡，要么整站改 SPA，要么用 Barba.js 这类库拦截链接自己做过渡——要引入一整套路由逻辑，首屏性能和 SEO 都要打折扣。

现在只需要在每个页面都声明一行：

@view-transition { navigation: auto; }

然后定义过渡动画：

::view-transition-old(root) {
  animation: fade-out 0.3s ease-out both;
}
::view-transition-new(root) {
  animation: fade-in 0.3s ease-in both;
}

浏览器会自动处理同源页面之间的过渡，不需要任何 JS 框架。

实战：让 Hero 图在页面间变形

最常见的场景是两个页面共用一个视觉元素，比如文章列表的缩略图和文章详情的 Hero 图。传统方案只能靠两个页面都加载同一张图然后自己算位置差值。现在只需要给两个元素取同一个名字：

/* 列表页和详情页都用这个类名 */
.article-cover { view-transition-name: hero; }

点击链接跳转时，浏览器自动让这张图从列表页位置平滑过渡到详情页位置——整站 MPA 获得了 SPA 级别的视觉连贯性。

浏览器支持现状

2026 年 Chrome 134+、Safari 18.2+ 都已稳定支持，覆盖率超过 95%。Firefox 目前还不支持跨文档模式，但同文档内（document.startViewTransition()）的支持一直在推进。

如果需要降级，只需要在不支持的浏览器里隐藏动画：

@supports (view-transition-name: auto) {
  /* 这里写 view-transition 规则 */
}

三步上手

第一步：在全局 CSS 里加 @view-transition { navigation: auto; }，让所有同源跳转自动带过渡。

第二步：找出页面间连续性最强的元素——通常是 Hero 图、导航栏或者 Logo——给它加 view-transition-name: 唯一标识;。

第三步：用 ::view-transition-group(标识) 自定义动画曲线，比如加个 spring 效果让它弹一下：

::view-transition-group(hero) {
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

从列表到详情、从分类到文章、从主页到落地页——所有这些跳转都可以丝滑过渡，而且你的站点依然是纯静态 HTML，不需要任何 JS 路由层。