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

在前端开发中，transition和animation都是用来实现动画效果的重要工具，但它们在使用场景和特性上有所不同。以下是关于何时使用transition以及何时使用animation的详细解答：

何时使用transition

1. 简单过渡效果：transition通常用于实现元素状态之间的简单过渡，例如鼠标悬停（hover）时元素的颜色、大小或位置的平滑变化。
2. 触发条件明确：transition需要明确的触发条件，如CSS伪类（如:hover、:active）或JavaScript事件来改变元素的样式，从而触发过渡效果。
3. 性能优化：与animation相比，transition在某些情况下可能更有利于性能优化，特别是当结合transform属性进行旋转和缩放等操作时，可以避免页面的重排和重绘。
4. 两帧动画：transition从本质上讲只有两帧——开始状态和结束状态，适用于那些不需要中间帧的简单动画。

何时使用animation

1. 复杂动画效果：当需要实现更复杂的动画效果，如多步骤动画、循环动画或具有特定时间线的动画时，应使用animation。
2. 自动开始与循环：与transition不同，animation可以自动开始，并且可以通过设置属性来轻松实现动画的循环播放。
3. 精细控制：animation提供了更多的属性来控制动画，如动画持续时间（animation-duration）、延迟时间（animation-delay）、迭代次数（animation-iteration-count）以及动画的播放方向（animation-direction）等。
4. 关键帧定义：通过@keyframes规则，可以为animation定义一系列关键帧，从而实现复杂的动画序列。每个关键帧描述了动画在不同时间点的状态。
5. 性能考虑：虽然animation在某些情况下可能比transition更耗性能（特别是当改变影响文档流的属性时），但通过合理的优化和使用，仍然可以实现高效的动画效果。

综上所述，在选择使用transition还是animation时，应根据具体的动画需求、触发条件、性能考虑以及动画的复杂性来做出决策。