transform定义元素的旋转、缩放、平移等形态变化，transition控制这些变化的过渡时间、缓动方式等动态过程，二者结合可实现平滑动画效果。
CSS 中 transition 和 transform 经常一起使用，但它们的作用完全不同。简单来说：transition 控制“变化的过程”，transform 定义“变化的形式”。
transform 是做什么的？
transform 用来改变元素的形状、位置或大小，比如旋转、缩放、平移或倾斜。
常见 transform 操作：- rotate(45deg)：旋转 45 度
- scale(1.5)：放大 1.5 倍
- translateX(20px)：向右移动 20 像素
- skew(10deg)：倾斜变形
注意：单独使用 transform 不会有动画效果，它是瞬间完成的。
transition 是做什么的？
transition 让属性的变化变得平滑，实现“从一种状态渐变到另一种状态”。
立即学习“前端免费学习笔记（深入）”；
它控制的是：
- 哪个属性要过渡（如 opacity、transform）
- 持续时间（如 0.3s）
- 缓动方式（如 ease-in、linear）
- 延迟时间（可选）
例如：鼠标悬停时，让按钮的颜色在 0.3 秒内慢慢变红，这就是 transition 的作用。
两者如何配合使用？
最常见场景是：用 transform 设置目标状态，用 transition 让这个变化有动画效果。
示例：一个旋转按钮
.button {
transition: transform 0.5s ease;
}
.button:hover {
transform: rotate(90deg);
}
当鼠标移到按钮上时，transform 触发旋转，transition 让旋转过程缓慢进行，形成动画。
关键区别总结
- transform：定义“变成什么样”（静态变换）
- transition：定义“怎么变过去”（动态过程）
- 只有 transform，变化是瞬间的；只有 transition，没有可变化的属性也无效
- 二者结合，才能实现流畅的交互动画
基本上就这些。理解清楚谁负责“形态”，谁负责“过程”，就能正确使用它们了。
