使用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; <p>/<em> 添加 transition 过渡 </em>/ transition: transform 0.3s ease; }</p><p>/<em> 鼠标悬停时使用 translate 实现位移 </em>/ .box:hover { transform: translateX(100px); }</p>
这里，translateX(100px) 表示在 X 轴方向移动 100px，transition 让这个移动过程持续 0.3 秒，并以 ease 效果播放。
立即学习“前端免费学习笔记（深入）”；
多方向位移与组合动画
你可以同时在 X 和 Y 轴上移动元素，例如斜向移动：
.box:hover { transform: translate(50px, 50px); }
也可以结合其他 transform 操作，比如先位移再旋转：
.box:hover { transform: translateX(100px) rotate(45deg); } </font><p>注意：所有 transform 操作都写在同一个 transform 属性中，用空格分隔。</p><H3>关键细节提示</H3><ul><li>确保初始状态和目标状态的 transform 值明确，避免从 <pre class="brush:php;toolbar:false;">none
到具体值时动画不生效或跳变。
transform
比修改
left
、
margin
等布局属性更高效，不会触发重排（reflow）。
transform: translateX(0);
占位，使 transition 更稳定。
基本上就这些，掌握 transition 和 transform 的配合，就能做出自然的位移动画。