css3animation和transition区别：CSS3 Animation 和 Transition，它们到底有啥区别？

本质区别：是“动画”还是“过渡”？

Transition（过渡）

Transition 是一种渐变效果，它基于 CSS 属性的变化，实现元素的平滑过渡，Transition 是在某个事件（如鼠标悬停、点击）触发时，让某个属性（如颜色、大小、位置）在一段时间内从初始值平滑地过渡到目标值。

核心特点：

• 基于状态变化（State Change）
• 需要定义起始状态和结束状态
• 依赖于用户交互或伪类（如:hover）
• 本质上是一种“缓动”效果

Animation（动画）

Animation 是一种独立的动画序列，它不依赖于初始状态和最终状态，而是通过关键帧（Keyframes）定义动画的每一帧样式，Animation 可以实现更复杂的动画效果，如旋转、移动、变形等。

核心特点：

• 基于关键帧（Keyframes）
• 可以定义多个中间状态
• 不依赖于用户交互，可以自动播放
• 支持更复杂的动画序列

核心对比：Animation vs Transition

使用场景：该用 Animation 还是 Transition？

使用 Transition 的场景

• 当你希望元素在某个事件（如鼠标悬停）后平滑地变化状态时。
• 当你只需要简单的状态变化（如颜色、大小、透明度）时。
• 当你希望动画与用户交互相关联时。

示例代码：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 0.5s ease;
}
.box:hover {
  background-color: blue;
}

使用 Animation 的场景

• 当你需要实现复杂的动画序列（如旋转、移动、变形）时。
• 当你希望动画自动播放,无需用户交互时。
• 当你需要动画在多个关键帧之间切换时。

示例代码：

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.box {
  animation: spin 2s linear infinite;
}

Animation 和 Transition 的选择

• Transition 更适合简单的状态变化,尤其是与用户交互相关的效果。
• Animation 更适合复杂的动画序列,能够实现更丰富的视觉效果。

理解两者的区别，可以帮助你更高效地实现网页动画效果，选择合适的工具,才能让你的代码更加优雅和高效。