css transition和transform是css中处理动画效果的两个核心属性，二者结合使用时可以让元素的位置变化呈现出平滑的过渡效果，相比使用js控制位置变化更加轻量，性能也更好。
核心属性基础说明
transition属性
transition用于控制css属性变化时的过渡效果，主要包含四个子属性：
- transition-property：指定需要过渡的css属性，比如transform、width等，默认值为all，表示所有可过渡属性都会生效
- transition-duration：指定过渡效果的持续时间，单位为s或者ms，必须设置否则不会出现过渡效果
- transition-timing-function：指定过渡的速度曲线，常见的有ease、linear、ease-in、ease-out等，默认值为ease
- transition-delay：指定过渡效果开始前的延迟时间，默认值为0s
也可以直接使用简写形式：transition: property duration timing-function delay;
transform属性
transform用于对元素进行几何变换，其中实现位移动画主要使用translate相关函数：
translateX(x)：沿X轴（水平方向）移动元素，x可以是px、rem、百分比等单位translateY(y)：沿Y轴（垂直方向）移动元素translate(x, y)：同时设置X轴和Y轴的位移，等同于分别设置translateX和translateY
二者结合实现位移动画
结合的核心逻辑是：将transform作为transition监听的属性，当transform的值发生变化时，transition会让这个变化过程呈现平滑过渡的效果，而不是瞬间完成。
基础水平位移动画示例
实现一个鼠标悬停时元素向右移动100px的动画：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础位移动画</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #409eff;
/* 设置过渡效果：监听transform属性，持续0.3秒，速度曲线为ease */
transition: transform 0.3s ease;
}
.box:hover {
/* 鼠标悬停时，元素沿X轴向右移动100px */
transform: translateX(100px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
斜向位移动画示例
实现同时沿X轴和Y轴移动的动画，点击按钮触发位移：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>斜向位移动画</title>
<style>
.move-box {
width: 80px;
height: 80px;
background-color: #f56c6c;
transition: transform 0.5s linear;
margin-top: 20px;
}
.active {
/* 同时沿X轴移动150px，Y轴移动80px */
transform: translate(150px, 80px);
}
</style>
</head>
<body>
<button onclick="document.querySelector('.move-box').classList.toggle('active')">切换位移状态</button>
<div class="move-box"></div>
</body>
</html>
注意事项
- transition需要设置在元素初始状态，而不是变化后的状态，否则只有进入变化状态时有过渡，回到初始状态会瞬间完成
- translate使用的百分比单位是相对于元素自身的宽高，而不是父元素的宽高，这一点和position定位的百分比计算方式不同
- 如果同时需要多个transform变换，比如位移加旋转，可以写在同一个transform属性中，用空格分隔，例如
transform: translateX(100px) rotate(45deg); - 不是所有css属性都支持transition过渡，transform属于支持过渡的属性，所以二者可以正常结合使用
css_transitioncss_transform位移动画前端动画修改时间：2026-07-22 23:15:53