在css中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 让属性的变化变得平滑，实现“从一种状态渐变到另一种状态”。

立即学习“前端免费学习笔记（深入）”；

稿定AI社区

在线AI创意灵感社区

60

查看详情

• 哪个属性要过渡（如 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，没有可变化的属性也无效
• 二者结合，才能实现流畅的交互动画

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

以上就是在css中transition与transform动画区别的详细内容，更多请关注php中文网其它相关文章！