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

何时使用 CSS Transition

CSS Transition 用于在元素的某个状态变化时，平滑过渡到另一个状态。它适合用于以下场景：

1. 用户交互：当用户与元素进行交互（如悬停、点击等）时，使用 Transition 可以使视觉效果更为自然。比如按钮在鼠标悬停时改变颜色或大小。

   .button {
     background-color: blue;
     transition: background-color 0.3s ease;
   }
   .button:hover {
     background-color: green;
   }
   

2. 状态变化：当元素的状态发生变化时（如显示或隐藏、激活或非激活等），Transition 可以添加视觉反馈。例如，展开和收起的菜单。

   .menu {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.5s ease;
   }
   .menu.active {
     max-height: 200px; /* 随意设置一个最大高度 */
   }
   

3. 简单的变换：对于简单的状态变化（如颜色、大小、透明度等），使用 Transition 更加简单和高效，不需要定义关键帧。

优势

• 易于实现：只需在 CSS 中定义开始和结束状态，简化了代码。
• 性能良好：浏览器对 Transition 的优化较好，性能通常优于 Animation。

何时使用 CSS Animation

CSS Animation 适用于更复杂的动画场景，特别是需要在多个关键帧之间切换时。以下是一些使用 Animation 的场景：

1. 复杂动画：当需要在不同状态之间进行多次变化时，例如元素旋转、缩放、移动等，可以使用 Animation。

   @keyframes example {
     0% { transform: translateX(0); }
     50% { transform: translateX(100px); }
     100% { transform: translateX(0); }
   }
   .box {
     animation: example 2s infinite;
   }
   

2. 持续动画：如果需要持续的动画效果（如旋转的加载图标），Animation 是更好的选择。

   @keyframes spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
   }
   .loader {
     animation: spin 1s linear infinite;
   }
   

3. 关键帧控制：当需要在动画之间控制不同的细节时，Animation 提供的关键帧功能可以帮助更好地实现复杂效果。

优势

• 灵活性：可以在多个关键帧之间定义详细的动画过程。
• 控制：Animation 可以控制动画的播放方式（如次数、延迟等），提供更高的灵活性。

总结

• 使用 Transition：适用于简单状态变化和用户交互，能够提供平滑的过渡效果。适合颜色、大小、透明度等简单变化。

• 使用 Animation：适用于复杂的动画效果，尤其是需要多个关键帧或持续性动画的场景，提供更高的灵活性和控制性。

在实际开发中，可以根据需求选择合适的方式来实现动画效果，确保用户体验的流畅性与视觉美感。