使用CSS transform和animation可高效实现流畅平移动画。1. transform的translate()函数通过GPU加速控制位移，避免重排；2. animation结合@keyframes定义关键帧动画，如translateX实现水平移动；3. 常用于按钮悬停、轮播图等场景，提升交互体验；4. 注意使用will-change优化渲染，避免频繁修改layout属性，确保动画性能。
使用 CSS 的 animation 与 transform 结合，可以高效实现元素的平移动画。这种方式性能好，不会触发重排，只影响合成层，适合制作流畅的位移效果。
1. transform 用于控制位移
transform: translate() 是实现平移的最佳方式，相比改变 left、top 等属性，它利用 GPU 加速，动画更流畅。
常用语法：- translateX(x)：沿 X 轴移动
- translateY(y)：沿 Y 轴移动
- translate(x, y)：同时沿 X 和 Y 轴移动
2. animation 驱动动画过程
通过 @keyframes 定义动画关键帧，在其中使用 transform 设置不同阶段的位置。
示例：让一个盒子从左到右平移 200px
立即学习“前端免费学习笔记（深入）”；
.element {
width: 100px;
height: 100px;
background: blue;
position: relative;
animation: slide 2s ease-in-out infinite;
}
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200px);
}
}
这个动画会在 2 秒内循环播放，元素沿 X 轴平移 200px。
3. 实际应用场景建议
这类组合常用于按钮悬停位移、轮播图切换、加载动画等。
例如：悬停时向右微移
.button {
display: inline-block;
padding: 10px 20px;
background: #007bff;
color: white;
transition: transform 0.3s;
}
.button:hover {
animation: moveRight 0.3s ease-out forwards;
}
@keyframes moveRight {
to {
transform: translateX(10px);
}
}
鼠标悬停时，按钮向右移动 10px 并停留（forwards 保持最终状态）。
4. 注意事项
为了确保动画流畅，注意以下几点：
- 使用 transform 而非 margin 或 left/right 控制位移
- 添加 will-change: transform 可提前优化渲染层
- 避免在动画中频繁修改 layout 属性
- 可配合 ease、cubic-bezier() 调整缓动效果
基本上就这些，掌握 transform 和 animation 的结合，就能轻松做出高性能的平移动画。不复杂但容易忽略细节。
