真正可行的方案是用 offset-path + offset-distance，CSS原生支持沿贝塞尔曲线、圆弧等任意路径移动，配合offset-rotate: auto可自动朝向路径切线，兼容Chrome79+、Edge79+、Safari15.4+。
用 @keyframes + transform: translate() 模拟路径移动不靠谱
直接靠 translateX() 和 translateY() 在关键帧里硬写坐标，只能实现直线或折线运动，无法贴合贝塞尔曲线、圆弧、椭圆等真实路径。浏览器不会自动计算路径上的点，你得自己算好每帧的 translate() 偏移量——这意味着要手写几十甚至上百个 0%, 1%, 2%... 关键帧，维护成本极高，且一换路径就得重算。
真正可行的方案是用 offset-path + offset-distance
这是 CSS 原生支持沿任意路径移动的标准方案，无需 JS，兼容性已覆盖 Chrome 79+、Edge 79+、Safari 15.4+（Firefox 仍需前缀 -moz-offset-path）。核心是两步：
- 用
offset-path定义路径，支持path()、circle()、ellipse()、inset()等函数 - 用
offset-distance控制元素在路径上的位置，配合@keyframes动画即可平滑移动
示例：沿 SVG 贝塞尔曲线移动
.mover {
offset-path: path('M 100 100 C 200 50, 300 150, 400 100');
animation: move-along 3s linear infinite;
}
@keyframes move-along {
to { offset-distance: 100%; }
}
offset-rotate 让元素朝向始终匹配路径切线
默认情况下，元素方向固定，看起来像“滑”过去而不是“走”过去。加一句 offset-rotate: auto; 就能让它自动旋转，对齐路径当前点的切线方向。常见组合写法：
立即学习“前端免费学习笔记（深入）”；
-
offset-rotate: auto;—— 自动朝向路径前进方向 -
offset-rotate: auto reverse;—— 反向朝向（比如倒车效果） -
offset-rotate: 90deg;—— 固定旋转，忽略路径
注意：如果路径起点是尖角（如 polyline 折线），auto 在拐点处可能有突变，可改用 path() 加圆角控制点缓解。
需要兼容老浏览器？用 getPointAtLength() + requestAnimationFrame 手动驱动
当必须支持 IE 或旧版 Safari 时，CSS 路径方案失效，得退回到 JS 方案。核心思路是：
- 把路径转成 SVG
<path></path>元素 - 调用其
getTotalLength()和getPointAtLength(n)获取路径上任意位置的坐标 - 用
requestAnimationFrame逐帧更新元素的style.left/top或transform: translate()
关键细节：别用 setInterval，它不保证帧率；别在循环里反复调用 getTotalLength()（开销大），应缓存；路径若动态变化，需重新缓存长度和点位。
真正难的不是写动画，而是路径定义是否可维护、是否能响应缩放与视口变化——offset-path 基于逻辑坐标，天然适配；而手动 JS 方案中，getPointAtLength() 返回的是绝对像素值，遇上 transform: scale() 或响应式布局就容易错位。
