CSS 关键帧动画怎么配合 SVG 路径实现沿着曲线奔跑-H5教程-PHP中文网

真正自然可维护的方案是用 offset-path + offset-distance 绑定 svg 路径，配合 offset-rotate: auto 实现自动切线对齐，再通过 @keyframes 驱动 offset-distance 进度。

css 关键帧动画怎么配合 svg 路径实现沿着曲线奔跑

用 CSS 关键帧动画让元素“沿着曲线奔跑”，核心不是靠 @keyframes 里反复写 transform: translate() 去模拟——那样算不准切线方向、维护困难、还容易抖动。真正自然、可维护、浏览器原生支持的方案，是把元素“绑”到 SVG 路径上，再用关键帧驱动它的位置进度。

用 offset-path + offset-distance 绑定路径

这是现代浏览器（Chrome 75+、Edge 79+、Safari 15.4+）唯一推荐的纯 CSS 路径动画方式。它直接解析 SVG 的 d 属性语法，无需 JS：

先在 HTML 中定义一条 SVG 路径（或直接复制 <path d="..."></path> 的 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;
}