motion-path 在 chrome 105+、edge 105+ 和 safari 16.4+ 原生支持，firefox 完全不支持；safari 对 offset-path 路径容错性极低，需单行紧凑格式，且 offset-distance 动画须加 will-change: offset-distance 才不卡顿。
motion-path 在主流浏览器的支持现状
Chrome 105+、Edge 105+ 和 Safari 16.4+ 原生支持 motion-path，但 Firefox 完全不支持（截至 2024 年中），且 Safari 对 offset-path 的 SVG 路径语法容错性极低——比如多一个空格或少一个逗号，动画直接静止，控制台也不报错。
- 别用在线 SVG 编辑器导出的路径直接粘贴，先用
path-data-polyfill或手动清理：删掉所有换行、多余空格，确保是单行紧凑格式 - Safari 中
offset-distance动画必须搭配will-change: offset-distance，否则卡顿明显；Chrome 则不需要 - 想兼容 Firefox？目前只能降级为
transform: translate()+getPointAtLength()手动计算，无法用纯 CSS 实现
offset-path 路径写法与常见错误
offset-path 接收的是 SVG 路径字符串，不是 CSS 描边路径，也不是 Canvas 坐标。最常踩的坑是坐标系理解错：它以元素自身左上角为原点，x 向右、y 向下，和 SVG 的 <path d="..."></path> 一致，但和 CSS 的 clip-path 逻辑不同。
- 绝对路径（
M100,50 L200,150 Q250,100 300,50）可用，但起点必须在视口内，否则元素“消失”——其实是跑出屏幕了 - 相对路径（
m100,50 l100,100 q50,-50 100,0）更安全，但注意小写字母表示相对，大写才表示绝对 - 别混用单位：
M100px,50px是非法的，必须写成M100,50（无单位） - 路径闭合（
Z）后，offset-distance: 100%会回到起点，但动画循环时可能因浮点误差轻微跳变
让 motion-path 动画真正“跟得稳”的关键参数
只设 offset-path 和 offset-distance 动画远远不够。元素默认按路径切线方向朝向，但旋转角度、缩放节奏、加速度曲线全靠额外控制。
- 用
offset-rotate: auto让元素自动对齐路径切线；加90deg可校正初始朝向（例如箭头默认指右，但路径起始段向上，就得写auto 90deg） -
offset-distance动画推荐用cubic-bezier(0.33,1,0.68,1)模拟缓入缓出，避免线性导致的机械感 - 如果路径含尖锐折角（如
L直连），offset-rotate会在拐点突变，需在拐点前后加贝塞尔平滑段（Q或C） - 动画卡顿？给元素加
contain: layout paint，防止路径重绘触发全局样式计算
motion-path 与 JavaScript 协同的边界在哪
纯 CSS 的 motion-path 无法响应鼠标位置、滚动进度或数据变化——这些必须交由 JS 驱动 offset-distance 的实时值。但直接频繁设置 style 会阻塞渲染，得绕开。
- 用
requestAnimationFrame控制更新频率，别在scroll事件里直接改style.offsetDistance - 需要暂停/反向/跳转？CSS 自身不提供 API，只能通过切换 class 控制动画状态，或用 JS 修改
animation-play-state和offset-distance - 路径动态生成（比如从地图 API 拿到坐标点）？别拼接字符串路径，用
Path2D+getPointAtLength()预计算关键帧，再喂给 CSS 自定义属性（--dist），CSS 里用offset-distance: var(--dist)
真正复杂的路径跟随，往往卡在 Safari 的路径解析静默失败、Firefox 的彻底缺席，以及 JS 与 CSS 交界处的状态同步——那里没有报错，只有元素突然不动了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
