在网页开发中，我们经常会需要实现元素的位移交互效果，比如鼠标悬停时元素移动、点击后元素滑动到指定位置等。如果直接使用left、top等属性修改元素位置，很容易出现位移变化不连贯、卡顿的问题，这时候结合transition和transform就能很好地解决这个问题。
为什么直接修改位置属性会导致位移不连贯
很多开发者习惯通过修改元素的left、top、margin这类布局属性来实现位移，这类属性属于页面的布局属性，每次修改都会触发浏览器的重排（reflow）操作，浏览器需要重新计算元素的位置和尺寸，再重新绘制页面。如果位移的变化帧率不够，就会出现明显的卡顿，视觉上就不连贯。
而transform属性的位移操作属于合成层操作，不会触发重排，只会触发重绘或者合成，浏览器的渲染开销更小，配合transition过渡属性就能实现帧率稳定的平滑位移。
transition与transform的基础用法
transition属性说明
transition是用来设置元素过渡效果的属性，它可以指定哪个属性需要过渡、过渡的时长、过渡的速度曲线以及过渡的延迟时间。常用的语法如下：
/* 过渡所有变化的属性，时长0.3秒，速度曲线为匀速，无延迟 */ transition: all 0.3s linear; /* 只过渡transform属性，时长0.5秒，速度曲线为先快后慢，延迟0.1秒 */ transition: transform 0.5s ease-out 0.1s;
transform位移用法
transform的translate系列函数用来实现元素位移，不会影响其他元素的位置，也不会触发重排。常用位移函数如下：
translateX(x)：沿X轴（水平方向）移动x距离translateY(y)：沿Y轴（垂直方向）移动y距离translate(x, y)：同时沿X轴和Y轴移动，y可以省略，省略时默认值为0
位移的值可以是像素px、百分比%等单位，百分比是相对于元素自身的尺寸计算。
结合两者实现连贯位移的示例
示例1：鼠标悬停时元素平滑移动
我们来实现一个卡片，鼠标悬停时向右下方平滑移动20像素的效果：
/* 卡片基础样式 */
.card {
width: 200px;
height: 120px;
background-color: #4a90e2;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
/* 设置过渡效果，作用于transform属性，时长0.3秒，速度曲线为ease */
transition: transform 0.3s ease;
cursor: pointer;
}
/* 鼠标悬停时的位移效果 */
.card:hover {
/* 向右下方移动20px */
transform: translate(20px, 20px);
}
<div class="card">
悬停我试试
</div>
示例2：点击按钮控制元素循环位移
再实现一个点击按钮后，元素在初始位置和目标位置之间平滑切换的效果：
.box {
width: 100px;
height: 100px;
background-color: #f5a623;
/* 过渡transform属性，时长0.5秒 */
transition: transform 0.5s ease-in-out;
}
/* 移动状态类 */
.box.move {
/* 向右移动300px */
transform: translateX(300px);
}
<button id="toggleBtn">切换位移</button>
<div class="box" id="targetBox"></div>
<script>
const btn = document.getElementById('toggleBtn');
const box = document.getElementById('targetBox');
btn.addEventListener('click', function() {
// 切换move类实现位移切换
box.classList.toggle('move');
});
</script>
常见问题与调试方法
位移效果没有生效
首先检查transition是否指定了正确的过渡属性，如果写transition: all 0.3s一般不会有问题，如果指定了特定属性，要确保属性名是transform而不是translate。其次检查元素是否有初始的transform值，或者是否在位移时覆盖了原有的transform属性，比如原有transform: rotate(10deg)，新增位移时如果只写transform: translateX(20px)会覆盖旋转效果，正确写法是合并所有变换：transform: rotate(10deg) translateX(20px)。
位移还是不够连贯
可以尝试调整transition的速度曲线，比如使用linear匀速曲线，或者检查是否有其他代码频繁修改元素的位置属性触发重排。也可以给元素添加will-change: transform属性，提前告诉浏览器该元素会有transform变化，浏览器会提前做好优化，不过不要大量使用这个属性，会增加内存开销。
注意：
transition只能作用于可以过渡的属性，transform的所有变换函数都是可过渡的，所以两者搭配可以覆盖绝大多数平滑位移的场景。如果需要更复杂的位移动画，比如贝塞尔曲线轨迹、循环动画，可以结合@keyframes使用，但是基础的连贯位移用transition加transform就足够实现。
transitiontransformcss_animationcss_transform修改时间：2026-06-12 03:15:33