transition和animation的区别？

这俩都是CSS3里做动画的利器，但分工明确。最核心的区别，你可以把transition看作一个“过程控制器”，它只管从一个状态到另一个状态的平滑过渡，比如颜色从红变蓝，或者大小从100px变到200px。这个过程需要触发，比如鼠标悬停、点击或者添加一个类。它本身不定义动画内容，只定义动画过程的速度曲线和时长。

.box {
  width: 100px;
  transition: width 0.5s ease-in-out;
}
.box:hover {
  width: 200px;
}

这个动画只在鼠标悬停和移开时发生。

animation则是一个“动画序列播放器”。它搭配@keyframes使用，能定义非常复杂的、包含多个中间状态的动画序列，并且可以控制循环次数、方向、播放状态（暂停或运行）等。它可以自动开始，不需要外部事件触发。

@keyframes move {
  0% { left: 0; }
  100% { left: 200px; }
}
.box {
  position: relative;
  animation: move 2s infinite alternate;
}

这个让盒子自己来回移动，并且无限循环。

简单说，transition是做简单的、基于状态变化的交互效果（比如按钮反馈），而animation是做预设好的、复杂的、可独立运行的动画（比如加载旋转图、 banner 轮播）。在现代HTML5应用开发里，根据需求选对工具，能让你的动效既高效又易于维护。