平移动画应优先使用 transform: translate() 配合 transition 或 animation 实现。简单状态过渡用 transition + translate 更简洁，复杂多阶段动画则选用 animation + @keyframes + translate()，避免使用 left/top 触发重排，以提升性能。
在CSS中实现平移动画，animation 和 transform: translate() 都可以完成，但它们的使用方式和适用场景有所不同。理解两者的区别与联系，有助于写出更高效、流畅的动画效果。
1. translate() 用于位移变换
transform: translate(x, y) 是 transform 的一个函数，用来将元素从原来的位置沿 X 轴和 Y 轴进行平移。它不会影响文档流，也不会触发重排（reflow），只触发合成（composite），因此性能很好。
单独使用 translate() 只是静态位移，要让它动起来，需要配合 transition 或 animation 使用。
示例：配合 transition 实现简单平移
.box {
transform: translateX(0);
transition: transform 0.5s ease;
}
.box:hover {
transform: translateX(100px);
}
2. animation 结合 @keyframes 实现复杂动画
CSS animation 可以定义更复杂的动画流程，通过 @keyframes 指定关键帧，控制动画的每一阶段。
立即学习“前端免费学习笔记（深入）”；
在 keyframes 中，也可以使用 transform: translate() 来实现平移。
示例：用 animation + translate 实现循环平移动画
@keyframes slide {
0% {
transform: translateX(0);
}
50% {
transform: translateX(200px);
}
100% {
transform: translateX(0);
}
}
.animated-box {
animation: slide 3s infinite ease-in-out;
}
3. 直接在 animation 中使用 transform 还是 left/top？
推荐使用 transform: translate() 而不是改变 left、top 等布局属性来实现平移动画。原因如下：
- translate() 属于合成层操作，浏览器可以用 GPU 加速，动画更流畅
- 修改 left/top 会触发 layout（重排），性能开销更大
- translate 不影响其他元素布局，避免页面抖动
@keyframes move {
from { left: 0; }
to { left: 100px; }
}
.bad-example {
position: relative;
animation: move 1s;
}
4. 总结：如何选择？
如果你只需要简单的状态过渡（比如 hover 平移），用 transition + translate 更简洁。
如果需要复杂节奏、循环、多阶段动画，使用 animation + @keyframes + translate() 更灵活。
无论哪种方式，优先使用 transform: translate() 来实现位移，保证动画性能。
基本上就这些，核心是：平移用 translate，动画控制看需求选 animation 或 transition。不复杂但容易忽略细节。
