支持CSS变量的clip-path动画必须使用inset()、circle()、ellipse()及顶点数固定的polygon()，且变量需经calc()包裹并带单位；inset()最稳妥，circle()在Safari中嵌套calc()支持不稳定。
clip-path 本身不支持 CSS 变量直接插值计算坐标或半径，但可以通过 -- 自定义属性 + calc() + 预设函数组合实现可控的动态转场遮罩——关键不在“变量驱动 clip-path”，而在“用变量控制可动画的 clip-path 形状参数”。
clip-path 动画必须用哪些函数才支持 CSS 变量？
只有 inset()、circle()、ellipse() 和部分 polygon()（顶点数固定时）能配合 calc() 使用变量。例如：
-
circle(calc(var(--r, 0) * 1px) at calc(var(--x, 50) * 1%) calc(var(--y, 50) * 1%))是合法的，但 Safari 对calc()在circle()中的嵌套支持不稳定，建议只用于 Chrome/Firefox/Edge -
inset(calc(var(--t, 0) * 1px) calc(var(--r, 0) * 1px) calc(var(--b, 0) * 1px) calc(var(--l, 0) * 1px))最稳妥，所有现代浏览器都支持，且能做平滑展开/收缩 -
polygon()若混用单位（如0 0, 100% 0, var(--w) 100%, 0 100%），会因单位不匹配导致整个声明失效；必须统一为 % 或 px，且顶点数不能变
为什么直接写 clip-path: circle(var(--radius)) 不生效？
因为 clip-path 的函数参数不接受裸变量，CSS 解析器会把 var(--radius) 当作无效标识符丢弃，最终 fallback 到 none。常见错误现象是遮罩突然消失、元素完全显示，或 DevTools 里看到该属性被划掉。
- 必须包裹在
calc()中，哪怕只是calc(var(--radius) * 1) - 变量值需带单位（如
--radius: 50px或--radius: 50%），不能只写数字 - 若变量来自 JS 注入，注意空格和引号：JS 设置
el.style.setProperty('--radius', '60%')没问题，但写成'60 %'（多空格）会导致解析失败
响应式下如何让变量驱动的 clip-path 保持中心对齐？
用 at center 或 at 50% 50% 即可，它始终相对于当前渲染盒内容框中心，与变量无关。但要注意两个陷阱：
立即学习“前端免费学习笔记（深入）”；
- 如果容器本身有
transform: scale(1.2)，clip-path 坐标系仍按原始尺寸计算，中心会偏移——此时应把clip-path移到子元素上，或改用transform: scale()+overflow: hidden模拟 - 在 flex/grid 容器中，若父容器未设明确宽高，
50%可能算出 0（尤其在 Safari 中）；建议给父容器加min-width: 0; min-height: 0或显式尺寸 - 动画过程中频繁读写
getBoundingClientRect()并更新变量，会触发重排；更轻量的做法是只更新--x/--y，用will-change: clip-path提示合成层
移动端 Safari 的 clip-path + 变量动画卡顿怎么破？
iOS Safari（尤其 16.4 之前）对 clip-path 字符串变更极其敏感，每帧重设都会触发重绘，比 transform 慢一个数量级。
- 优先用
inset()动画替代circle()扩散，它性能更好、兼容性更强 - 避免在
@keyframes中写含变量的clip-path；改为 JS 控制变量，再用 CSS transition 监听变量变化 - 如果必须用
circle()，把半径变量限制为整数百分比（如--r: 0; --r: 100;），避开小数导致的亚像素抖动 - 真要极致流畅，就放弃
clip-path，改用mask-image: radial-gradient(circle at var(--x) var(--y), #000 0%, #000 var(--r), transparent var(--r))—— mask 支持变量且硬件加速更稳，只是 Safari 对radial-gradient作为 mask 的支持从 iOS 16.4 才完善
最常被忽略的一点：clip-path 的动画起始值必须是合法形状。比如用 inset(100% 0 0 0) 做“从右向左展开”，不能写成 inset(100% 100% 100% 100%) 再过渡——后者虽然视觉上“全裁剪”，但某些浏览器会拒绝解析，直接跳过动画。
