transition、animation、transform三者有什么区别？

transition、animation 和 transform 都是 CSS 属性，用于创建视觉效果，但它们的工作方式和用途不同：

1. transform (变换):

• 作用: transform 用于改变元素的形状、大小、位置和方向，但不改变元素的初始状态和最终状态之间的中间状态。它就像一次性地将元素从一个状态改变到另一个状态，没有动画过程。
• 常用属性值:
  • translate(x, y): 平移
  • rotate(angle): 旋转
  • scale(x, y): 缩放
  • skew(x-angle, y-angle): 倾斜
  • matrix()：矩阵变换，可以组合多种变换效果
• 示例: transform: rotate(45deg); 会立即将元素旋转 45 度，没有动画过渡。
• 关键特点: transform 本身不产生动画，它只是改变元素的视觉呈现。要实现动画效果，需要结合 transition 或 animation 使用。

2. transition (过渡):

• 作用: transition 提供了一种在两种状态之间平滑过渡的方式。当元素的某些属性发生变化时（例如 :hover、:focus 或 JavaScript 修改），transition 会使这些变化以动画的形式展现，而不是突变。
• 常用属性:
  • transition-property: 指定要过渡的属性 (例如 width, height, background-color, transform 等)。
  • transition-duration: 过渡的持续时间。
  • transition-timing-function: 过渡的速度曲线 (例如 ease, linear, ease-in-out 等)。
  • transition-delay: 过渡的延迟时间。
• 示例: transition: width 2s ease-in-out; 当元素的宽度发生变化时，会在 2 秒内以 ease-in-out 的速度曲线进行过渡。
• 关键特点: transition 需要触发，通常是通过改变元素的属性值来触发。它只能实现简单的、从一个状态到另一个状态的动画。

3. animation (动画):

• 作用: animation 允许创建更复杂的动画序列，可以定义多个关键帧和更精细的控制。它不需要像 transition 那样依赖于状态的变化来触发。
• 常用属性:
  • animation-name: 动画的名称，与 @keyframes 规则关联。
  • animation-duration: 动画的持续时间。
  • animation-timing-function: 动画的速度曲线。
  • animation-delay: 动画的延迟时间。
  • animation-iteration-count: 动画的播放次数 (例如 infinite 表示无限循环)。
  • animation-direction: 动画的方向 (例如 normal, reverse, alternate 等)。
• 示例:

@keyframes my-animation {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

.element {
  animation: my-animation 2s infinite;
}

• 关键特点: animation 更加灵活，可以创建复杂的动画效果，并且可以通过 @keyframes 规则精确控制动画的每个阶段。

总结:

特性	transform	transition	animation
作用	变换元素	状态过渡	复杂动画
触发方式	直接应用	属性变化	通过 animation 属性
动画控制	无	简单控制	精细控制
复杂度	低	中	高

通常情况下，transform 会与 transition 或 animation 结合使用，例如使用 transition 来实现平滑的旋转效果 (transition: transform 2s ease;)，或者使用 animation 来创建更复杂的位移动画。 单独使用 transform 只会改变元素的最终状态，而不会产生动画效果。