使用 transform 和 animation 可实现高性能平滑平移动画。1. translate() 位移不触发重排，优于 left/margin；2. @keyframes 定义动画关键帧，支持 from/to 或百分比；3. animation 属性绑定动画，设置时长、缓动、循环等；4. 示例中 alternate 实现往返移动。推荐用于按钮、加载、轮播等场景。
要实现元素的平滑平移动画，使用CSS animation 结合 transform: translate() 是最推荐的方式。这种方法性能好、动画流畅，且不会触发页面重排（reflow），适合现代网页开发。
1. 使用 transform: translate() 实现位移
transform: translate(x, y) 可以在不脱离文档流的情况下移动元素。相比通过改变 left 或 margin 实现移动，translate 更高效，因为它只影响图层的合成阶段，不引起布局变化。
例如，将一个元素向右移动100px，向下移动50px：
transform: translate(100px, 50px);
立即学习“前端免费学习笔记（深入）”；
2. 定义关键帧动画 @keyframes
通过 @keyframes 规则定义动画过程中的状态。比如让元素从左侧移动到右侧：
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(200px);
}
}
也可以使用百分比控制动画节奏：
@keyframes slide {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(200px);
}
}
3. 应用 animation 到元素
将定义好的动画绑定到目标元素，并设置动画参数，如持续时间、缓动函数、是否循环等：
.moving-box {
width: 100px;
height: 100px;
background: #007acc;
animation: slide 2s ease-in-out infinite;
}
常用 animation 属性包括：
- animation-name: 指定 @keyframes 名称
- animation-duration: 动画时长，如 2s
- animation-timing-function: 缓动效果，如 ease、linear、ease-in-out
- animation-iteration-count: 循环次数，infinite 表示无限循环
- animation-delay: 延迟开始时间
- animation-fill-mode: 控制动画外阶段的样式，如 forwards 保持最终状态
4. 完整示例：左右来回移动的方块
<div class="box"></div>
<style>
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
animation: moveBackAndforth 3s ease-in-out infinite alternate;
}
@keyframes moveBackAndforth {
from {
transform: translateX(0);
}
to {
transform: translateX(300px);
}
}
</style>
这个例子中，alternate 使动画在奇数次正向播放，偶数次反向播放，实现来回移动效果。
基本上就这些。结合 transform 和 animation，你可以轻松实现各种平滑、高性能的平移动画，适用于按钮悬停、加载提示、轮播图等场景。不复杂但容易忽略细节，比如尽量使用 translate 而非 left/top 修改位置，能显著提升动画流畅度。
