不能靠 offset-path + offset-distance 直接实现真正“循环滑动”的文字路径动画——除非路径本身闭合且浏览器支持到位，否则终点会跳回起点，视觉上就是卡顿或断裂。
不能靠 offset-path + offset-distance 直接实现真正“循环滑动”的文字路径动画——除非路径本身闭合且浏览器支持到位，否则终点会跳回起点，视觉上就是卡顿或断裂。
为什么 offset-path 动画在开放路径上必然卡顿
浏览器对 offset-distance 的解析是线性的：从 0% 到 100% 走完路径全长后，动画重置，元素瞬间回到起点。哪怕你写了 animation: move 3s infinite linear，只要路径没闭合（比如 path("M0,0 L100,0 L100,100")），就会出现明显“闪回”。
- 闭合路径必须以
Z结尾，例如d="M20,50 Q50,0 80,50 T140,50 Z" -
offset-path: ray()或offset-path: rect()完全不支持循环，Chrome 会静默降级为无动画 - 用
path()函数写贝塞尔曲线时，首尾坐标不必物理重合，但拓扑上得闭合（即路径终点与起点可被渲染引擎判定为连续）
offset-rotate: auto 是朝向一致的必要条件
只控制位置不控制旋转，文字会在拐弯处“侧躺”甚至倒置——这不是 bug，是规范行为。
- 必须显式写
offset-rotate: auto（等价于offset-rotate: auto 0deg），否则文字始终朝 x 轴正向 - 若需初始朝上，写成
offset-rotate: auto 90deg - Safari 当前不支持
offset-rotate，要么 JS 模拟（用getPointAtLength()+Math.atan2()），要么降级为@property+rotate()插值（兼容性差但可控）
display 必须是 block 或 inline-block
offset-path 对默认 display: inline 的文字完全无效——这是最常被忽略的前提。
立即学习“前端免费学习笔记（深入）”；
- 哪怕路径、动画、距离都写对了，文字也纹丝不动
- 推荐包裹一层
<span>或<div>并设display: inline-block - 不要依赖父容器的 display 属性传递；子元素必须显式声明
无缝循环的替代方案：SVG <textPath>
如果目标是让单个文字沿路径“弯曲排列”并循环，offset-path 不适用——那是 <svg> 的 <textPath> 领域。
-
<textPath href="#myPath">文字</textPath>可让字符贴合路径自然弯曲 - 要循环，需复制多段相同文字并拼接路径，或用 JS 动态更新
startOffset - 性能比 CSS 方案略低，但 Safari/Chrome 兼容性更稳，且真正支持字符级变形
真正难的不是写对那几行 CSS，而是判断该用 offset-path 还是 <textPath>——前者适合整个文字块沿轨迹移动，后者才适合文字“缠绕”路径。选错方向，再调参数也没用。
