用@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 值。
