CSS Motion Path 现行标准为 offset-path + offset-distance，motion-path 已废弃；Chrome/Edge 102+、Safari 15.4+ 支持，Firefox 不支持且无计划实现，需用 @supports 检测并提供降级方案。
目前无法在主流浏览器中稳定使用 offset-path 和 motion-path 实现跨浏览器兼容的路径跟随动画——这两个属性已被废弃或重命名，实际开发中应改用 offset-path + offset-distance（或其现代别名 path + path-length），且需注意 Safari 仅从 v15.4+ 支持，Chrome/Edge 从 v102+ 起支持，Firefox 完全不支持。
为什么 motion-path 不起作用？
这是最常见的困惑来源：motion-path 是早期 CSS Motion Path Module Level 1 的草案属性名，早已被移除。现行标准中已统一为 offset-path。如果你写了 motion-path: path('M0,0 L100,50');，所有浏览器都会忽略它——CSS 解析器根本认不出这个属性。
- 正确写法是：
offset-path: path('M0,0 L100,50'); - 旧教程里出现的
motion-path、motion-offset、motion-rotation全部失效 - Chrome 控制台会静默丢弃未知属性，不会报错，容易误判为“写对了但没动”
offset-path 动画必须配合 offset-distance
只设 offset-path 不会让元素动起来——它只是定义轨道，真正驱动位移的是 offset-distance（取值范围 0% 到 100%，对应路径起点到终点）。动画本质是让 offset-distance 随时间变化。
- 基础动画示例：
@keyframes follow { from { offset-distance: 0%; } to { offset-distance: 100%; } } .element { offset-path: path('M20,20 Q80,0 140,20'); animation: follow 3s ease-in-out forwards; } -
offset-distance支持任意缓动函数，也能用animation-timing-function控制速度曲线 - 若想循环往返，用
animation-direction: alternate;+animation-iteration-count: infinite;
Firefox 不支持怎么办？必须降级处理
截至 2024 年，Firefox 仍无计划实现 offset-path（官方 Bugzilla 状态为 “WONTFIX”）。这意味着依赖该特性的动画在 Firefox 中完全静止——不是卡顿，是根本不动。
立即学习“前端免费学习笔记（深入）”；
- 检测支持性：可用
@supports (offset-path: path(''))包裹样式，或 JS 中检查CSS.supports('offset-path', 'path("")') - 降级方案一：用 SVG
<animateMotion>（兼容性好，但需内联 SVG，灵活性低） - 降级方案二：用 GSAP 的
MotionPathPlugin，它通过 JS 计算路径点并更新transform，全浏览器一致 - 切勿只写
offset-path而不提供 fallback——用户在 Firefox 里看到的就是一个钉死的元素
路径数据本身（如 path('M0,0 C50,50 100,-20 150,0')）没有兼容性问题，但解析和插值逻辑由浏览器实现，不同引擎对贝塞尔曲线控制点的处理细微差异可能导致位置偏移。真要追求像素级一致，还是得用 JS 驱动。
