在CSS3动画体系中，transform和transition是两个经常被一起提到但职责完全不同的属性。transform用来定义元素在二维或三维空间中的几何变换，比如平移、旋转、缩放和倾斜；transition则用来控制某个属性从旧值变到新值时所花费的时间、速度曲线和延迟。只有把两者结合起来，才能用纯CSS实现平滑的动画效果。
一、transform属性基础
transform本身并不会让变化过程变得平滑，它只是描述了元素最终应该处于什么形态。常见的函数包括translate、rotate、scale和skew。这些函数可以组合使用，中间用空格隔开。例如下面这段代码让一个盒子向右移动100像素并旋转30度：
.box {
width: 100px;
height: 100px;
background: #3498db;
transform: translateX(100px) rotate(30deg);
}
如果直接在页面加载时就应用上面的样式，用户看到的是盒子已经处在移动并旋转后的位置，没有任何过程感。这是因为浏览器在解析CSS时直接计算了最终矩阵并渲染，没有中间帧。很多人在刚接触CSS动画时误以为写了transform就会有动画，其实还差一个触发过渡的条件。
另外需要注意，transform的变化是基于元素自身的变换原点（transform-origin）计算的，默认是元素中心。如果需要以左上角为基点旋转，就要显式设置transform-origin: 0 0;。这一细节在制作复杂动画时非常关键，否则元素可能会偏离预期轨迹。
二、transition属性详解
transition的作用是为属性的变化提供时间维度。它其实是四个子属性的简写：property、duration、timing-function和delay。最简单的写法是指定要监听的属性名和持续时间，例如transition: transform 0.4s ease;。这样当transform的值发生改变时，浏览器会用0.4秒按照ease曲线完成插值。
.btn {
padding: 10px 20px;
background: #2ecc71;
transition: background 0.3s linear;
}
.btn:hover {
background: #27ae60;
}
上面的例子监听的是background属性，鼠标悬停时颜色在0.3秒内线性变化。如果希望多个属性同时过渡，可以用逗号分隔，如transition: transform 0.5s, opacity 0.3s;。timing-function除了ease和linear，还有ease-in、ease-out、ease-in-out以及cubic-bezier自定义曲线，用来模拟更真实的加速度感。
需要强调的是，transition必须写在元素的最初状态上，而不是写在:hover等触发状态里。如果只在悬停时写transition，那么鼠标移出时的恢复过程将没有过渡效果，这是新手常踩的坑。
三、transform与transition配合示例
将两者结合，就能实现不需要JavaScript的悬停动画。下面用一个卡片举例，默认状态轻微缩小，悬停时放大并上浮，同时加上阴影过渡：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.card {
width: 200px;
height: 120px;
background: #fff;
border: 1px solid #ddd;
transition: transform 0.3s ease, box-shadow 0.3s ease;
transform: scale(0.95);
}
.card:hover {
transform: scale(1) translateY(-10px);
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
</style>
</head>
<body>
<div class="card">悬停看效果</div>
</body>
</html>
在这段代码中，.card初始有transform: scale(0.95)和transition声明。当鼠标移入，transform变成scale(1) translateY(-10px)，由于transition监听了transform，浏览器自动生成0.3秒的平滑形变；同时box-shadow也过渡出现。鼠标移出时，状态回退，同样有过渡，不会生硬闪回。
这种写法的优点是非常轻量，不占用主线程做动画计算，由合成器线程处理，性能较好。缺点是只能处理从一种状态到另一种状态的简单切换，无法做多关键帧的连续动画，那种需求要用@keyframes和animation属性。
四、常见误区与调试建议
一个典型误区是认为只要写了transform就会有动画，结果页面刷新元素直接跳变。请记住：transform定义终点，transition定义过程。另一个误区是在触发态写transition，导致反向无动画。还有人把transition-property写成all，虽然方便但可能让不需要过渡的属性也产生意外动画，建议明确写出属性名。
/* 不推荐 */
.element {
transition: all 0.5s;
}
/* 推荐 */
.element {
transition: transform 0.5s ease, opacity 0.5s ease;
}
调试时可以使用浏览器开发者工具的动画面板，查看每一帧的属性和时间线。如果动画没出现，先检查transition是否挂在初始选择器上，再检查属性名是否拼写正确，最后确认值确实发生了改变（例如类名切换或伪类触发）。理清这两条属性的分工，CSS3动画入门就成功了一大半。
transformtransitionCSS3_animation修改时间：2026-08-08 19:48:34