用@keyframes+translateX/translateY只能实现分段线性移动，无法精确描述贝塞尔曲线等平滑路径；可通过多关键帧打点拟合曲线，或使用兼容性有限的offset-path，优先推荐GPU加速的transform方案。
用 @keyframes + translateX/translateY 实现直线移动没问题，但无法精确描述曲线轨迹
单纯靠 translateX 和 translateY 只能做分段线性插值——浏览器在关键帧之间做匀速（或按 timing-function 调整）的线性过渡。比如从 (0, 0) 到 (100px, 50px)，再跳到 (50px, 120px)，路径是折线，不是平滑曲线。
如果你需要贝塞尔曲线、圆弧、螺旋等真实运动路径，translateX/translateY 本身不提供控制点参数，必须靠外部手段逼近或替代。
想模拟简单曲线？用多个 @keyframes 关键帧“打点拟合”
这是最直接的兼容方案：手动计算曲线上若干点的坐标，填进 @keyframes 中。适合缓动明显、节奏可控的动画，比如抛物线弹跳、S 形入场。
- 先确定时间轴（如
0%, 25%, 50%, 75%, 100%），再算出对应位置：translateX(0)→translateX(30px) translateY(20px)→translateX(60px) translateY(0)→ … - 注意：关键帧越多，越接近曲线，但性能开销略增；少于 5 个点容易看出棱角
- 别忘了设
transform-origin: center（避免元素自身旋转影响位移基准）
@keyframes moveAlongSpline {
0% { transform: translateX(0) translateY(0); }
33% { transform: translateX(40px) translateY(-30px); }
66% { transform: translateX(80px) translateY(10px); }
100% { transform: translateX(120px) translateY(0); }
}
真·路径动画该用 offset-path（但兼容性有限）
Chrome 55+/Edge 79+/Safari 15.4+ 支持 offset-path，可直接指定 path() 字符串，配合 offset-distance 驱动元素沿 SVG 路径移动，支持贝塞尔、椭圆、任意 d 值。
立即学习“前端免费学习笔记（深入）”；
- 写法：
offset-path: path("M0,0 C20,50 80,50 100,0");，再用animation: slide 2s linear infinite;控制offset-distance - 缺点：Firefox 完全不支持；旧版 Safari 需要
-webkit-offset-path且只支持基础形状 - 如果项目需全浏览器覆盖，得降级为 SVG
<animatemotion></animatemotion>或 JS 驱动
为什么不用 top/left？它们会触发重排，性能差
用 top 和 left 移动元素时，浏览器必须重新计算布局（layout），每一帧都可能引发重排（reflow），尤其在中低端设备上卡顿明显。而 translateX/translateY 属于合成层属性，走 GPU 加速，只触发重绘（paint）甚至合成（composite）。
- 务必确保动画元素有独立合成层：加
will-change: transform或transform: translateZ(0) - 避免同时 animating
width,height,opacity等触发 layout 的属性 - 检查 DevTools > Rendering > “Paint flashing” 和 “FPS meter”，确认是否真走合成
offset-path。多数业务场景里，“够用的折线 + 缓动函数”反而是更稳的选择。 
