使用transform和transition实现高效位移动画。1. 用translate()函数对元素进行平移；2. 通过transition属性添加平滑过渡效果；3. 结合:hover触发交互动画；4. 可叠加rotate等变换。该方法性能优于修改margin或left，推荐优先使用。
要实现元素的位移动画，可以结合 CSS 的 transition 和 transform 属性。这种方式性能好、代码简洁，且不会触发页面重排。
1. 使用 transform 实现位移
transform 可以对元素进行平移、旋转、缩放等操作。实现位移主要使用 translateX()、translateY() 或 translate(x, y)。
例如，让一个元素向右移动 100px，向下移动 50px：
transform: translate(100px, 50px);
立即学习“前端免费学习笔记（深入）”；
2. 使用 transition 添加动画过渡
transition 控制属性变化时的过渡效果。设置它可以让 transform 的变化变得平滑。
常用写法包括：
- transition: transform 0.5s ease; —— 只对 transform 做 0.5 秒缓动动画
- transition: all 0.3s linear; —— 对所有属性做线性动画
3. 结合 :hover 实现交互动画
最常见的是鼠标悬停时触定位移动画。示例代码如下：
<font style="font-family:monospace; background:#f4f4f4; padding:10px; display:block; margin:10px 0; border-radius:4px">
.box {
width: 100px;
height: 100px;
background: #3498db;
transition: transform 0.4s ease;
}
.box:hover {
transform: translateX(50px);
}
</font>
当鼠标移到 .box 元素上时，它会向右平滑移动 50px。
4. 配合其他 transform 操作
你也可以同时做多个变换。比如位移 + 旋转：
<font style="font-family:monospace; background:#f4f4f4; padding:10px; display:block; margin:10px 0; border-radius:4px">
.box:hover {
transform: translate(30px, 20px) rotate(15deg);
}
</font>
transition 会自动过渡所有可动画的 transform 变化。
基本上就这些。关键是：用 transform 做位移，用 transition 让变化更自然。这种方式比直接改变 margin 或 left 更高效，推荐在动画中优先使用。
