offset-path 是现代 CSS 路径动画最直接方案，支持 Chrome 75+、Edge 79+、Safari 15.4+，通过 path() 定义路径、offset-distance 控制位置、offset-rotate 设置朝向；不支持 IE 和旧 Safari，需降级为 SVG animateMotion 或 JS。
用 offset-path 实现 SVG 路径运动（现代方案）
Chrome 75+、Edge 79+、Safari 15.4+ 支持 offset-path，它是目前最直接的 CSS 路径动画方式，无需 JS 或 SVG
-
offset-path接收path()字符串（类似 SVGd属性），例如path('M0,0 C50,50 150,50 200,0') - 配合
offset-distance控制位置（0% → 100%），用transition或@keyframes驱动 - 注意：元素默认以中心点对齐路径，可用
offset-rotate控制朝向（如auto自动转向） - 不支持 IE 和旧版 Safari；若需兼容，得降级为 SVG
@keyframes moveOnPath {
from { offset-distance: 0%; }
to { offset-distance: 100%; }
}
.mover {
offset-path: path('M20,20 Q100,50 200,20');
offset-rotate: auto;
animation: moveOnPath 3s ease-in-out infinite;
}
用 transform: translate() 模拟分段路径（兼容性最强）
当目标浏览器不支持 offset-path，或路径含复杂贝塞尔曲线但只需近似效果时，可将路径拆成若干直线段，用多个 translate() 关键帧拼接。这不是真路径，但视觉上足够连贯。
- 每段用
transform: translate(x, y)表示相对位移，而非绝对坐标 - 时间分配要匹配路径长度比例，否则速度不均（比如长线段配短时间会显得突兀）
- 避免在单个
@keyframes中写 20+ 帧——维护困难且动画易卡顿；建议拆成多个连续动画或用 JS 控制 - 注意
transform-origin默认是 center，若元素需绕某角运动，得显式设置
@keyframes fakePath {
0% { transform: translate(0, 0); }
25% { transform: translate(100px, 30px); }
50% { transform: translate(180px, 10px); }
75% { transform: translate(220px, 40px); }
100% { transform: translate(200px, 0); }
}
混合 transform 位移与旋转时的顺序陷阱
CSS 中 transform 函数执行顺序是从左到右，而位移和旋转叠加时，顺序错了会导致路径偏移。比如 rotate(45deg) translate(100px, 0) 是先转再沿新 X 轴走，而 translate(100px, 0) rotate(45deg) 是先走到 (100, 0)，再原地转 —— 效果完全不同。
- 想让元素“沿着路径前进并始终朝向切线方向”，必须用
offset-rotate: auto（offset-path方案），而不是靠手动rotate() - 若只能用
translate()+rotate()组合，务必确认旋转基准点（transform-origin）和函数书写顺序 - 调试技巧：给元素加
outline: 1px solid red，观察旋转中心是否符合预期
性能关键：避免触发布局（layout）和绘制（paint）
路径动画若频繁改变 left/top 或触发 width/height 变化，会导致浏览器不断重排重绘，掉帧明显。只用 transform 和 opacity 才能走合成层（compositor layer）。
立即学习“前端免费学习笔记（深入）”；
- 绝对禁止在动画中修改
margin、padding、width、height、left等触发 layout 的属性 - 确保动画元素已提升为独立图层：
will-change: transform（仅在必要时加，别滥用）或transform: translateZ(0) - 用 Chrome DevTools 的 “Rendering” 面板勾选 “Paint flashing”，看是否有意外重绘区域
