标准答案
- transition 和 animation 都能做 CSS 动画，但触发方式和表达能力不同。
- transition 是两个状态之间的过渡，必须有属性值变化触发，比如 hover、class 切换或媒体查询变化。
- animation 基于 @keyframes，可以定义多个关键帧、循环次数、方向、延迟、暂停和填充模式，也可以页面加载后自动运行。
- 简单状态变化用 transition，比如按钮 hover、弹窗显隐、菜单展开；复杂时间轴或循环动画用 animation，比如 loading、骨架屏闪烁。
- 无论用哪种，都优先动画 transform 和 opacity，谨慎动画 width、height、top、left、box-shadow。
题目解析
transition 关注“两个状态之间怎么过渡”，animation 关注“按时间轴怎么播放”。
如果动画需要暂停、循环、反向、多关键帧，animation 更合适；如果只是 class 切换后的平滑过渡，transition 更简单。
代码示例
按钮 hover 用 transition，加载点用 animation。
CSS
.button {
transition: background-color 160ms ease, transform 160ms ease;
}
.button:hover {
transform: translateY(-1px);
}
@keyframes pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
.loading-dot {
animation: pulse 1s infinite;
}常见误区
- 用 animation 处理简单 hover，代码复杂且不易维护。
- 用 transition 处理循环 loading，触发条件不自然。
- 动画 width、height 导致每帧布局变化。