Transition与Transform区别详解

在网页动画开发中，CSS的`transition`和`transform`是两个至关重要的属性，但它们的作用却截然不同。`transform`定义了元素形态的变化，例如旋转`rotate`、缩放`scale`、平移`translateX`和倾斜`skew`等，它决定了元素“变成什么样”。而`transition`则控制这些形态变化的过渡效果，包括过渡时间、缓动方式和延迟时间，它负责定义“怎么变过去”。简单来说，`transform`负责静态变换，`transition`负责动态过程。两者配合使用，才能实现流畅的交互动画效果，让网页元素的变化不再生硬突兀。本文将深入解析`transition`与`transform`的区别与联系，助你掌握这两个属性的精髓，打造更具吸引力的网页动画。

transform定义元素的旋转、缩放、平移等形态变化，transition控制这些变化的过渡时间、缓动方式等动态过程，二者结合可实现平滑动画效果。

CSS 中 transition 和 transform 经常一起使用，但它们的作用完全不同。简单来说：transition 控制“变化的过程”，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，没有可变化的属性也无效
• 二者结合，才能实现流畅的交互动画

基本上就这些。理解清楚谁负责“形态”，谁负责“过程”，就能正确使用它们了。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Transition与Transform区别详解》文章吧，也可关注golang学习网公众号了解相关技术文章。