在CSS动画体系中，transform和transition是两个核心属性，前者负责元素形变操作，后者负责过渡效果控制，两者搭配可以实现很多轻量化的动态交互效果，不需要依赖JavaScript就能完成多数基础动画需求。
transform属性介绍
transform属性用于对元素进行形变操作，它不会影响到文档流中其他元素的位置，所有形变操作都是基于元素自身的变换原点完成的。常见的形变函数包含平移、旋转、缩放、倾斜等类型。
常用transform函数
- translate()：平移元素，可分别设置X轴和Y轴的平移距离，比如translate(10px, 20px)表示向右移10px、向下移20px
- rotate()：旋转元素，参数为旋转角度，比如rotate(45deg)表示顺时针旋转45度
- scale()：缩放元素，参数为缩放比例，比如scale(1.5)表示元素放大为原来的1.5倍
- skew()：倾斜元素，可分别设置X轴和Y轴的倾斜角度，比如skew(20deg, 0)表示沿X轴倾斜20度
transform基础使用示例
下面是一个让元素在鼠标悬停时同时平移和旋转的代码例子：
/* 基础样式 */
.box {
width: 100px;
height: 100px;
background-color: #4CAF50;
transition: transform 0.3s ease; /* 配合transition实现平滑过渡 */
}
/* 悬停时形变 */
.box:hover {
transform: translate(20px, 20px) rotate(15deg);
}
transition属性介绍
transition属性用于定义元素从一个状态过渡到另一个状态时的动画效果，它可以控制过渡的属性、持续时间、速度曲线和延迟时间。如果没有transition，元素的状态变化会瞬间完成，没有中间过渡过程。
transition子属性说明
| 子属性 | 作用 | 默认值 |
|---|---|---|
| transition-property | 指定需要过渡的CSS属性，可设置为all表示所有可过渡属性 | all |
| transition-duration | 过渡持续的时间，单位为s或ms，必须设置否则无过渡效果 | 0s |
| transition-timing-function | 过渡的速度曲线，常见值有ease、linear、ease-in、ease-out等 | ease |
| transition-delay | 过渡开始前的延迟时间，单位为s或ms | 0s |
transition简写语法
transition支持简写形式，语法为transition: property duration timing-function delay;，不需要设置的参数可以省略，比如只需要设置持续时间和速度曲线可以写成transition: 0.5s ease;。
transition基础使用示例
下面是一个让元素背景色和宽度平滑过渡的例子：
.btn {
width: 120px;
height: 40px;
background-color: #2196F3;
color: white;
border: none;
/* 简写过渡：所有可过渡属性，持续0.3秒，速度曲线为ease */
transition: 0.3s ease;
}
.btn:hover {
width: 150px;
background-color: #1976D2;
}
transform和transition的核心区别
- 功能定位不同：transform只负责元素的形变操作，本身不会产生动画效果；transition只负责控制状态变化的过渡过程，本身不改变元素的状态
- 作用对象不同：transform作用的是元素自身的几何属性；transition作用的是CSS属性值的变化过程
- 性能差异：transform的形变操作会触发硬件加速，性能优于直接修改宽高、位置等属性，而transition如果过渡的是宽高、margin等影响文档流的属性，可能会引起页面重排，性能相对较差
两者配合使用的实践场景
实际开发中通常会把transform和transition搭配使用，用transition控制transform属性变化的过渡过程，实现性能更好的动画效果。下面是一个按钮点击反馈的例子：
.press-btn {
width: 140px;
height: 50px;
background-color: #FF5722;
color: white;
border: none;
border-radius: 8px;
/* 设置transform属性变化时的过渡效果 */
transition: transform 0.2s ease;
}
/* 点击时缩小元素 */
.press-btn:active {
transform: scale(0.95);
}
这个例子中，transition监听transform属性的变化，当用户点击按钮时，transform的scale值从1变为0.95，transition会让这个变化在0.2秒内平滑完成，实现按钮按下的反馈效果，整个过程不会触发重排，性能表现很好。
注意事项
- transition只能监听已经存在的CSS属性的变化，如果属性是从无到有，可能无法触发过渡效果
- transform的形变原点可以通过
transform-origin属性修改，默认是元素中心点 - 如果需要更复杂的动画序列，比如多段动画、循环动画，建议使用animation属性配合@keyframes规则，比单纯使用transition更灵活
注意：transform属性不会影响到元素的可点击区域，即使元素平移或旋转后，点击区域还是原来的位置，如果需要调整点击区域需要额外处理。
CSStransformtransition动画属性修改时间：2026-06-15 17:41:23