使用CSS transition与transform结合可实现高效位移动画。通过transition定义过渡时间与缓动函数，transform执行translateX、translate等位移操作，避免重排并启用硬件加速。例如.box:hover时应用transform: translateX(100px)，实现0.3秒平滑右移。支持多方向位移如translate(50px, 50px)及组合动画如translateX(100px) rotate(45deg)，所有变换需在同一transform属性中以空格分隔。关键点包括：明确初始与目标状态的transform值，避免从none引发跳变；推荐初始设为transform: translateX(0)占位以确保动画稳定流畅。
使用 CSS 的 transition 与 transform 结合，可以轻松实现流畅的位移动画效果。这种方式性能好，因为 transform 属于合成属性，浏览器会将其提升到图层中进行硬件加速。
基本原理
transition 定义属性变化时的过渡效果，比如持续时间、缓动函数；transform 用于对元素进行位移、旋转、缩放等操作。将两者结合，可以让元素在状态改变时（如 hover）平滑地移动位置。
实现横向或纵向位移
以下是一个鼠标悬停时向右平移 100px 的例子：
.box {
width: 100px;
height: 100px;
background: #3498db;
margin: 50px;
/ 添加 transition 过渡 /
transition: transform 0.3s ease;
}
/ 鼠标悬停时使用 translate 实现位移 /
.box:hover {
transform: translateX(100px);
}
这里，translateX(100px) 表示在 X 轴方向移动 100px，transition 让这个移动过程持续 0.3 秒，并以 ease 效果播放。
立即学习“前端免费学习笔记（深入）”；
多方向位移与组合动画
你可以同时在 X 和 Y 轴上移动元素，例如斜向移动：
.box:hover {
transform: translate(50px, 50px);
}
也可以结合其他 transform 操作，比如先位移再旋转：
.box:hover {
transform: translateX(100px) rotate(45deg);
}
注意：所有 transform 操作都写在同一个 transform 属性中，用空格分隔。
关键细节提示
- 确保初始状态和目标状态的 transform 值明确，避免从
none
到具体值时动画不生效或跳变。 - 使用
transform
比修改left
、margin
等布局属性更高效，不会触发重排（reflow）。 - 若需初始就有 transform，建议设置为
transform: translateX(0);
占位，使 transition 更稳定。
基本上就这些，掌握 transition 和 transform 的配合，就能做出自然的位移动画。
