全屏遮罩缩放动画需显式指定圆心为50% 50%、兼容safari需加-webkit前缀并触发硬件加速、动画三要素（初始/过渡/结束状态）缺一不可。
clip-path 实现全屏遮罩缩放动画的关键限制
直接用 clip-path: circle() 做全屏缩放入场，浏览器渲染行为和坐标系容易出错——默认原点在元素左上角，circle(0) 从左上角开始扩张，不是视觉中心；且 Safari 对 clip-path 的动画支持不一致，部分版本会闪动或跳帧。
- 必须显式设置
clip-path的动画起始/结束值，不能依赖默认值 - 使用
circle(0 at 50% 50%)明确指定圆心为视口中心，否则缩放中心偏移 - Chrome 和 Firefox 支持
clip-path的transition，但 Safari 需要加-webkit-clip-path并确保父容器有transform: translateZ(0)触发硬件加速
动画代码必须写的三要素
缺一不可：初始状态、过渡声明、结束状态。只写 transition 或只改 clip-path 值都不触发动画。
- 初始状态（遮罩关闭）：
clip-path: circle(0 at 50% 50%)，同时加-webkit-clip-path: circle(0 at 50% 50%) - 过渡声明（放在遮罩容器上）：
transition: clip-path 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-clip-path 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) - 结束状态（遮罩打开）：
clip-path: circle(150% at 50% 50%)，150% 是保险值，确保完全覆盖全屏（尤其高 DPR 屏幕）
示例结构：
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #000;
z-index: 9999;
clip-path: circle(0 at 50% 50%);
-webkit-clip-path: circle(0 at 50% 50%);
transition: clip-path 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
-webkit-clip-path 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.overlay.active {
clip-path: circle(150% at 50% 50%);
-webkit-clip-path: circle(150% at 50% 50%);
}
配合 JavaScript 控制时机的常见坑
用 JS 切换 .active 类时，如果 DOM 还没就绪或样式未加载完成，动画可能不触发。不是 JS 写错了，是 CSS 还没挂载好。
- 不要在
DOMContentLoaded立即加 class，等window.onload或至少requestAnimationFrame下一帧再操作 - 如果遮罩需要「页面加载完才出现」，务必等
document.fonts.ready或关键资源加载后执行，否则文字闪入会破坏动画节奏 - 移动端要注意：iOS Safari 在页面滚动后可能重置
clip-path动画状态，建议加will-change: clip-path提前告知渲染引擎
替代方案：什么时候该放弃 clip-path 改用 transform
当你的遮罩需要兼容 iOS 14 以下、或动画需精确控制缩放比例（比如从 0.8x 缩放到 1.2x）、或要叠加模糊/渐变背景时，clip-path 就力不从心了。
-
transform: scale()+opacity组合更稳定，尤其搭配will-change: transform, opacity - 用
overflow: hidden的父容器包裹一个scale(0)的子层，比clip-path更少受设备像素比影响 - 如果必须用裁剪效果（比如菱形/多边形入场），优先考虑
clip-path: polygon()配合 JS 动态计算顶点，而不是硬编码百分比
clip-path 的缩放动画本质是“视觉裁剪变化”，不是真实缩放；真要模拟镜头推近，得靠 transform: scale() 配合定位微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
