请说说在什么时候用transition？什么时候使用animation？

在前端开发中，transition 和 animation 都用于创建动画效果，但它们适用于不同的场景：

transition 过渡:

• 用于状态变化: transition 适用于元素从一个状态到另一个状态的平滑过渡，例如鼠标悬停、焦点变化、激活状态等。它关注的是状态之间的变化过程，而不是定义一个复杂的动画序列。
• 简单动画: transition 适合简单的动画，例如改变颜色、大小、位置等。它定义了起始状态和结束状态，浏览器会自动计算中间的过渡帧。
• 易于使用: transition 使用起来相对简单，只需要定义要过渡的属性、持续时间、缓动函数等即可。
• 示例: 鼠标悬停在一个按钮上时，按钮的背景颜色平滑地改变。

animation 动画:

• 复杂动画: animation 适用于更复杂的动画序列，可以定义多个关键帧、循环播放、控制动画方向等。它更注重的是动画本身的定义和控制。
• 自定义动画: animation 可以通过 @keyframes 规则精确地控制动画的每一帧，实现更精细的效果。
• 循环播放: animation 可以设置循环播放次数，实现无限循环或指定次数的循环。
• 示例: 一个加载动画，由多个旋转的圆圈组成，循环播放。

总结：

特性	transition 过渡	animation 动画
使用场景	状态变化、简单动画	复杂动画序列、自定义动画
复杂度	简单	复杂
控制方式	定义起始和结束状态，浏览器自动计算中间帧	通过 @keyframes 定义关键帧，精确控制动画
循环播放	不支持	支持
触发方式	状态改变触发	可以通过 JavaScript 或 CSS 控制触发和停止

选择哪种方式?

• 如果只需要简单的状态变化动画，例如悬停效果，使用 transition 更方便快捷。
• 如果需要实现复杂的动画序列、循环播放或更精细的控制，则应该使用 animation。

希望这个解释能够帮助你更好地理解 transition 和 animation 的区别和应用场景。