Keynote式翻页效果本质是状态映射，需用View Transitions API实现：必须包裹DOM替换操作、两页设相同view-transition-name、通过::view-transition-old/new定义动画，而非单纯transform或CSS变量过渡。
Keynote式翻页效果本质是状态映射，不是纯CSS动画
直接用 transform: rotateY() + transition 做“翻书”只能模拟单页局部旋转，无法复现 Keynote 那种两页之间几何映射、透视联动、自动遮罩的翻转感。关键区别在于：Keynote 翻页是「旧内容退场 + 新内容入场」的同步空间关系变更，而传统 CSS transition 只能驱动单个元素属性渐变，不感知 DOM 结构更替。
用 View Transitions API 实现真翻页，必须满足三个条件
浏览器原生翻页效果依赖视图过渡的快照机制，不是靠手写 keyframes 拼凑：
-
document.startViewTransition()必须包裹 DOM 替换操作（比如切换.page元素的innerHTML或显隐状态），不能只改 class - 参与翻页的两个页面需有相同
view-transition-name（例如都设为page），否则浏览器无法建立新旧节点映射 - CSS 中必须用
::view-transition-old(page)和::view-transition-new(page)定义动画，不能依赖.page.active这类自定义类名——过渡期间真实 DOM 已更新，伪元素作用于浏览器生成的临时影子节点
为什么 transform: rotateY() 单独用会穿帮
常见翻车现场：给 .page 加 transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)，再 JS 切换 rotateY(180deg)。问题在于：
- 没有透视上下文（
perspective和transform-style: preserve-3d缺一不可），旋转看起来像平面翻牌而非立体翻页 - 两页共存时 z-index 或 stacking context 冲突，导致翻转中途出现错层或闪烁
- 无法响应页面尺寸变化——Keynote 翻页会随窗口缩放自动调整轴心和弧度，纯 CSS transform 是固定角度，不联动
-
rotateY()本身不触发重绘优化，频繁操作易掉帧；而 View Transitions API 启用 GPU 加速的合成层，动画更稳
CSS 自定义属性（--bg）无法用 transition 实现翻页
有人试图靠切换 :root 的 CSS 变量 + transition: --bg 0.3s 来“过渡主题”，这完全走偏了。View Transitions API 不支持 CSS 自定义属性过渡，且它根本不管变量——它只捕获 DOM 节点树的实际增删/替换。哪怕你把 --bg 改成 #000，只要没调用 startViewTransition() 并更新 DOM，就不会触发任何翻页动画。
立即学习“前端免费学习笔记（深入）”；
真正要做的，是让每次翻页都成为一次 DOM 状态跃迁：旧 .page 被移除或 aria-hidden="true"，新 .page 插入或解除隐藏，然后由 API 自动接管后续所有视觉过渡细节。细节藏在伪元素里，不在 JS 控制流中。
