用途:为单页应用 DOM 切换提供 View Transitions(同文档与跨文档)、CSS 滚动驱动动画(animation-timeline: scroll()/view() 及命名时间线形式)和 scroll-snap 的确定性实现规则,用浏览器原生原语替代 FLIP 库、IntersectionObserver 滚动显现、requestAnimationFrame 滚动轮询等 JavaScript 胶水代码。
主要能力:document.startViewTransition(callback) 在回调内同步更新 DOM,浏览器在调用前后各做一次快照,返回 ViewTransition 对象,含 .ready、.finished、.updateCallbackDone 与 .skipTransition();伪元素树为 ::view-transition → ::view-transition-group(name) → ::view-transition-image-pair(name) → ::view-transition-old/new(name)。跨文档 MPA 需在源与目标文档同时声明 @view-transition { navigation: auto; },只声明一侧会静默失效。view-transition-name 每次快照必须唯一,且需同时设在旧元素与新元素上才能形变。滚动驱动动画支持 scroll()、view() 与命名时间线(scroll-timeline、view-timeline、timeline-scope);animation-timeline 在 animation 简写中为 reset-only,须在 animation 之后单独声明。scroll-snap 提供 scroll-snap-type、scroll-snap-align、scroll-snap-stop、scroll-padding、scroll-margin 及 scrollsnapchange、scrollsnapchanging 事件。
使用方式:SPA 路由或列表到详情切换用 startViewTransition 包裹 DOM 更新;纯 CSS 状态变化用普通 transition;MPA 导航用 @view-transition。滚动进度条用 animation-timeline: scroll(block root),元素进入视口显现用 view() 配合 animation-range。滚动驱动动画在 2026 年仍属 Limited Availability,需用 @supports (animation-timeline: scroll()) 门控。
限制:所有动画必须用 prefers-reduced-motion 门控,无例外;滚动驱动动画应仅使用 transform 与 opacity;scroll-snap-type: mandatory 不适用于长文内容;避免在超大元素上设置 view-transition-name 造成整页快照性能问题。资料未提供具体收费、价格与平台信息。