offset-path 仅chrome 75+支持，firefox/safari截至2024年底仍不支持，仅适用于实验性场景；需配合offset-rotate和offset-distance协同使用，且必须设transform: none以确保路径准确。
offset-path 不支持所有浏览器，先确认能否用
Chrome 仅从 75 版本开始支持 offset-path，Firefox 和 Safari 完全不支持（截至 2024 年底仍无原生实现）。如果你的项目需兼容主流浏览器，offset-path 不能直接上线——它目前只适合实验性页面或内部工具。
可通过 @supports (offset-path: path('')) 做特性检测，但别指望 fallback 自动生效：CSS 动画一旦在不支持的浏览器里解析失败，整个 @keyframes 中依赖 offset-distance 的部分会被静默忽略，元素停在初始位置，毫无提示。
- 检查方式：
getComputedStyle(el).offsetPath在不支持时返回空字符串，不是none - 替代方案优先考虑 SVG
<animatemotion></animatemotion>或 JS 驱动（如 GSAP 的MotionPathPlugin） - 若强行用，必须搭配
offset-rotate和offset-distance三者协同，缺一不可
path() 函数里的坐标单位和方向容易写反
offset-path: path('M 0 0 L 100 100') 看似简单，但默认坐标系原点在元素自身左上角，且 Y 轴向下为正——这和 SVG 的 <path></path> 一致，但和多数设计师给的“屏幕坐标”（Y 向上）相反。实际路径常因坐标翻转导致元素朝错方向移动。
- 绝对坐标推荐用
path('M0,0 C50,−50 150,−50 200,0')，注意负号是 ASCII 减号，不是中文破折号 - 相对命令（
m,l,c）更安全，比如path('M0,0 l100,0 l0,100')明确表达位移 - 路径闭合（
Z）后，offset-distance超过 100% 会循环，但 Firefox 会直接崩溃渲染线程（已知 bug）
offset-distance 动画必须配合 transform: none 才准
如果元素本身有 transform: rotate(10deg) translateX(20px)，offset-distance 的运动路径会叠加在该 transform 结果之上，造成轨迹偏移、速度突变，甚至视觉卡顿。这不是 bug，是规范定义的行为：offset 系统作用于元素的“未 transform 前”的布局盒。
- 务必重置：
transform: none，否则offset-distance: 50%可能落在完全意料之外的位置 - 旋转朝向要用
offset-rotate: auto，而不是靠transform: rotate()模拟，后者会干扰路径切线计算 - 动画曲线对
offset-distance有效，但ease-in-out在路径拐点处可能产生非匀速感——这是贝塞尔插值与路径弧长不匹配导致的，无法通过 CSS 修复
想让多个元素共用一条路径？别复用 path() 字符串
看似把同一段 path('M0,0 Q100,50 200,0') 写在多个元素的 offset-path 里就能复用，但每个元素独立解析字符串，内存开销翻倍，且无法统一控制路径更新。更麻烦的是：路径稍有修改（比如加个空格），所有地方都要手动同步，极易漏改。
- 正确做法：用 SVG
<defs></defs>定义<path id="route"></path>，然后 CSS 写offset-path: url(#route) - 注意：
url(#route)中的#route必须指向同文档内存在的 SVG 元素，跨 iframe 或外部文件不生效 - 动态更新路径？只能 JS 改
document.querySelector('#route').setAttribute('d', newD)，CSS 会自动响应
真正难的不是写出路径，而是当设计临时把曲线拉直、把终点下移 20px 时，你得立刻判断该改哪几个地方、会不会影响已有的 offset-distance 关键帧语义——这种耦合，往往比换掉整个动画方案还耗神。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
