真正自然可维护的方案是用 offset-path + offset-distance 绑定 SVG 路径，配合 offset-rotate: auto 实现自动切线对齐，再通过 @keyframes 驱动 offset-distance 进度。
用 CSS 关键帧动画让元素“沿着曲线奔跑”，核心不是靠 @keyframes 里反复写 transform: translate() 去模拟——那样算不准切线方向、维护困难、还容易抖动。真正自然、可维护、浏览器原生支持的方案，是把元素“绑”到 SVG 路径上，再用关键帧驱动它的位置进度。
用 offset-path + offset-distance 绑定路径
这是现代浏览器（Chrome 75+、Edge 79+、Safari 15.4+）唯一推荐的纯 CSS 路径动画方式。它直接解析 SVG 的 d 属性语法，无需 JS：
- 先在 HTML 中定义一条 SVG 路径（或直接复制
<path d="...">的d值）；示例：M20,100 Q100,30 180,100 T340,100 - 目标元素必须设为
position: absolute或fixed（relative 不生效） - 用
offset-path: path('...')指定路径，offset-distance控制当前位置（0% → 100%）
加 offset-rotate: auto 让它“抬头跑”
不加这句，元素就像被拖着滑行，方向僵硬；加上后，它会自动对齐路径每一点的切线方向，看起来真是在“奔跑”而不是“平移”：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
offset-rotate: auto就够了，浏览器自动计算朝向 - 如果想额外加个固定偏角（比如图标始终朝上），写成
offset-rotate: auto 90deg - 注意：锚点默认是元素中心，若需以左下角为运动基准，可用
offset-anchor: 0 1
用 @keyframes 驱动进度变化
关键帧只管控制 offset-distance，其余交给浏览器渲染引擎：
立即学习“前端免费学习笔记（深入）”；
- 动画时间分配建议匹配路径长度感（长曲线配稍长时间，避免视觉突兀）
- 缓动函数如
ease-in-out或cubic-bezier(.4,0,.6,1)更贴近真实加速/减速 - 示例代码：
@keyframes runOnCurve {
0% { offset-distance: 0%; }
100% { offset-distance: 100%; }
}
.runner {
position: absolute;
offset-path: path('M20,100 Q100,30 180,100 T340,100');
offset-rotate: auto;
animation: runOnCurve 4s ease-in-out infinite;
}
兼容旧浏览器的务实处理
Firefox 需加 -moz-offset-path 前缀；IE 和旧 Safari 完全不支持，此时建议：
- 降级为 SVG 内置的
<animateMotion>（语义清晰、兼容性好） - 或用 GSAP + MotionPathPlugin，它能自动 fallback 并提供更精细控制（如速度曲线、暂停/反向）
- 避免用几十个
translate()关键帧硬拼——路径一改全重来，且易卡顿
