clip-path 动画必须使用同构路径才能平滑插值，即起止帧的函数类型、顶点数量、单位和坐标顺序须完全一致；混用 circle() 与 polygon() 或单位不统一会导致硬切；polygon() 控制力最强但调参复杂，需人工对齐顶点数与顺序；circle() 和 inset() 兼容性好，适合简单动效；Safari 等浏览器存在渲染限制，需注意 overflow、will-change 及动画填充模式。
clip-path 动画必须用同构路径，否则直接跳变
浏览器只对「结构一致」的 clip-path 值做插值动画。比如两个 polygon() 都含 6 个点、单位统一（全用百分比）、顺序对应，才能平滑过渡；一旦起始帧是 circle(0)、结束帧是 polygon(...)，动画就失效，变成硬切。
- 优先用
polygon()实现所有形状——哪怕是“近似圆”，可用 12 个点围成，再过渡到方形的 4 个角（补足 8 个重合点） - 避免混用单位：
polygon(0% 0%, 100px 50%)在部分浏览器里会拒绝插值 - 坐标顺序不能错：从左上顺时针写和逆时针写，动画轨迹完全不同，甚至可能翻转
circle() 和 inset() 是最稳妥的入门选择
它们参数固定、类型单一，适合做入场/收起类动效，兼容性好，Safari 加 -webkit-clip-path 就能跑。
-
circle(0% at 50% 50%) → circle(75% at 50% 50%)：中心扩散效果，注意半径别设超过150%，否则边缘裁剪失效 -
inset(50% 0) → inset(0)：上下压缩→展开，适合卡片悬停揭示，但 Safari 对inset()的transition支持不稳定，建议改用@keyframes - 别在
transform: scale()容器里直接用at 50% 50%，坐标系不随缩放更新，中心会偏——把clip-path移到子元素上更可靠
polygon() 动画调参最耗时间，但控制力最强
真正复杂的形状变换（比如三角形→五角星→矩形）全靠它，但每帧的点数、顺序、数值范围都得人工对齐，稍错一点就卡顿或闪退。
- 起始和结束帧必须顶点数相同：想从三角形变方形？补两个“隐形点”（比如设为
50% 50%让它们叠在一起） - 用 SCSS 自动生成坐标可减少手误，例如扇形展开用
@function sector-polygon($angle, $steps)，但要注意cos()/sin()返回值需映射到0%–100%范围内 - Safari 和旧版 Chrome 容易掉帧，加
will-change: clip-path或transform: translateZ(0)强制进合成层，但别滥用，会增加内存开销
动画卡顿或 Safari 不动，先查这三处
不是代码写错，而是渲染链路上的隐性限制被触发了。
- 父容器有
overflow: hidden，子元素做clip-path动画时会额外触发裁剪计算，性能暴跌——改用overflow: clip（支持有限）或重构层级 - JS 频繁修改
element.style.clipPath，每次都是 Layout + Paint，换成 CSS 自定义属性：clip-path: polygon(var(--p))，再用element.style.setProperty('--p', '...') - 没加
forwards或infinite时，动画结束后样式回退，看起来像“闪一下”——检查animation-fill-mode是否设对
真正难的不是写出第一个动画，而是让不同形状之间过渡自然、在各种缩放和设备下都不偏移。坐标系、单位、顶点数，三个变量只要一个没对齐，效果就断掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
