可行，但必须满足三条件：position为absolute或fixed；路径字符串单行紧凑、无单位、大写；offset-distance须显式动画，缺一即静默失效。
用 offset-path + offset-distance 实现路径循迹
纯 CSS 方案可行，但必须满足三个硬性条件：元素 position 是 absolute 或 fixed；路径字符串是单行紧凑格式（无空格、无单位、大写字母）；offset-distance 必须显式动画。漏掉任一条件，动画就静默失效——控制台不报错，元素也不动。
常见错误现象：offset-path: path("M 100,50 C 150,0 250,100 300,50") 看似正确，但因含空格和小写 c，Safari 直接跳过解析；Chrome 可能勉强运行但拐点错位。
- 正确写法：
offset-path: path("M100,50C150,0,250,100,300,50") - 必须搭配
@keyframes或transition控制offset-distance，只设offset-path不会动 - 起点坐标需在视口内，否则元素“消失”——其实是跑出屏幕左上角外了
为什么 offset-rotate: auto 在折线拐角会突变
offset-rotate: auto 的转向逻辑依赖路径切线方向，而 SVG 中连续的 L 或 M 指令构成的直角拐点没有定义切线，浏览器只能硬切，导致元素在拐点瞬间翻转 90° 或 180°，视觉上像抽搐。
解决办法不是调参数，而是改路径本身：
立即学习“前端免费学习笔记（深入）”；
- 把尖锐折角换成贝塞尔曲线段（
C或Q），哪怕只是微调控制点，也能让转向平滑 - 若必须用折线，可手动计算拐点前后两段的方向角，在关键帧中分段控制
transform: rotate()补偿 - 避免在
offset-path中混用相对指令（m,l）和绝对指令（M,L），大小写不一致会导致起点偏移
动画卡顿或首帧闪一下的根源
Safari 下 offset-distance 动画卡顿，大概率缺了 will-change: offset-distance；首帧闪一下，则是 @keyframes 没写 from —— 浏览器按默认 offset-distance: 0 渲染第一帧，再从 0 动画到 100%，看起来就是“先闪现再重播”。
- 加
will-change: offset-distance到动画元素，仅此一项，Safari 帧率常能从 20fps 提升到 55+fps -
@keyframes move { from { offset-distance: 0%; } to { offset-distance: 100%; } }，from不可省 - 若用
transition，确保触发时是样式变更（如 class 切换），而非 JS 直接改style.offsetDistance后立刻读取，否则可能因渲染时机错过过渡
Firefox 和旧版安卓 WebView 怎么办
Firefox 完全不支持 offset-path，且无 polyfill 能真正补全；旧版安卓 WebView（Android 8 及以下）同样无效。这时候别硬套 CSS，直接切 JavaScript 方案更稳。
核心是用 getPointAtLength() 手动采样路径，配合 requestAnimationFrame 推进：
- 先用
pathEl.getTotalLength()获取总长（注意：未渲染完成时返回 0，需用requestAnimationFrame延迟一次再读） - 循环调用
pathEl.getPointAtLength(t * len)得到每帧坐标，设为el.style.transform = translate(${x}px, ${y}px) - 用
cubic-bezier(0.33, 0.66, 0.66, 1)控制t的变化节奏，实现缓动效果 - 路径含
transform属性不影响getPointAtLength()结果，它始终基于原始几何路径计算
最易被忽略的是：所有参与动画的 <path></path> 必须是内联 SVG 中的真实 DOM 节点，<img src="a.svg" alt="如何用CSS3制作沿着复杂SVG路径移动的循迹动画" > 或 <use href="#p"></use> 都无法读取长度或采样点——这点在 SSR 或图标库场景下极容易栽跟头。
