offset-path 动画需路径闭合、搭配 offset-rotate: auto 控制朝向、文字元素设为 inline-block/block，且路径坐标禁用百分比以避免重排卡顿。
offset-path 路径定义必须是闭合或可循环的 SVG 路径
浏览器对 offset-path 的循环动画支持依赖路径本身的拓扑特性。即使你设置了 animation: move 3s infinite linear，如果路径不是首尾自然衔接（比如 M0,0 L100,0 L100,100 这种开放折线），文字在终点会“跳回”起点，形成明显卡顿。
实操建议：
- 优先用
path()函数配合d属性写 SVG 贝塞尔曲线，例如：offset-path: path("M20,50 Q50,0 80,50 T140,50")； - 若需真正无缝循环，改用
offset-path: url(#myPath)引用 SVG<path></path>元素，并确保其d属性以Z闭合（哪怕视觉上不显闭合）； - 避免用
offset-path: ray()或offset-path: rect()——它们不支持offset-distance动画循环，Chrome 会静默降级。
offset-distance 动画必须配合 transform: rotate() 才能保持朝向一致
只靠 @keyframes { offset-distance: 0% → 100% } 会让文字沿路径平移，但字符始终朝 x 轴正向，导致在曲线拐角处“侧躺”或倒置。这不是 bug，而是规范行为：offset-distance 控制位置，不控制旋转。
实操建议：
- 必须叠加
offset-rotate: auto（等价于offset-rotate: auto 0deg），它让元素自动对齐路径切线方向； - 若需微调起始朝向（比如让文字初始时垂直向上），写成
offset-rotate: auto 90deg； - 注意 Safari 目前不支持
offset-rotate，需用 JS +getPointAtLength()模拟，或降级为 CSS @property +rotate()插值（兼容性差但可控）。
文字元素必须设为 display: inline-block 或 block 才能受 offset-path 影响
offset-path 对 display: inline（如默认的 <span></span>）无效，这是最容易被忽略的渲染前提。即使写了路径和距离动画，文字也纹丝不动。
实操建议：
- 给文字容器加
display: inline-block（推荐）或display: block； - 若容器内含多行文字，需额外设置
white-space: nowrap防止换行打断路径布局； - 不要依赖父容器的
transform或position: absolute来“补救”——它们不改变offset-path的生效条件。
动画性能关键：避免 layout 触发，慎用 percentage 单位路径
当 offset-path 使用百分比单位（如 path("M0%,0% L100%,0%")）时，每次容器尺寸变化都会触发重计算，且 Chrome 会同步执行 layout，导致动画掉帧。尤其在响应式页面中，窗口 resize 可能让循环动画瞬间卡死。
实操建议：
- 路径坐标一律用绝对单位（
px）或视口单位（vw/vh），避开%； - 用
will-change: offset-distance提示合成器接管动画，但仅在必要时添加（避免过度使用引发内存开销）； - 测试时打开 Chrome DevTools → Rendering → “Paint flashing”，确认路径动画区域无意外重绘。
路径循环本身不难，难的是让每个字符在任意曲率点都稳稳“站”住、不跳、不闪、不卡——这些细节不在规范里明说，但在真实设备上全会暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
