transition 和 animation 都是用来实现在 CSS 中添加动态效果的属性

一：区别

1：transition 是一种状态变化的过渡效果，常用于当元素的状态（如位置、大小、颜色等）发生改变时，使其能够平滑地过渡到新状态。

transition 只能实现从一种状态到另一种状态的简单过渡，它可以通过设置 transition-duration，transition-delay，transition-timing-function 和 transition-property 等属性来实现过渡的细节控制

transition需要触发一个事件才能改变属性，并且transition为2帧，从from .... to，

2：animation 是一种可以实现复杂动画效果的属性，它可以让元素在某一时间段内按照预定的路径进行动画变换，可以定义多个关键帧（keyframes）并指定动画执行的时间、速度和延迟等属性。

通过使用 animation-name，animation-duration，animation-delay，animation-timing-function，animation-iteration-count 和 animation-direction 等属性来实现动画效果的控制

animation不需要触发任何事件的情况下才会随时间改变属性值，而animation可以一帧一帧的

二：总结

transition 适用于简单的状态过渡效果，animation 更适用于实现复杂的动画效果

三：代码

<style>
    /* 使用 transition 实现鼠标悬浮时颜色的过渡 */
    .box1 {
      width: 200px;
      height: 200px;
      background-color: blue;
      transition: background-color 1s;
    }
    .box1:hover {
      background-color: red;
    }
    
    /* 使用 animation 实现循环旋转动画 */
    .box2 {
      width: 200px;
      height: 200px;
      background-color: green;
      animation: spin 2s linear infinite;
    }
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
  </style>