动画可自动播放，过渡需状态变化触发；transition依赖:hover等状态改变才生效，animation通过@keyframes定义并可自启、循环、暂停。
动画（animation）和过渡（transition）最核心的区别在于：过渡需要“状态变化”来触发，而动画可以自动播放。
transition 必须依赖状态变化
transition 不是独立运行的，它只在元素的 CSS 属性值发生改变时起作用——比如鼠标悬停（:hover）、焦点获取（:focus）、类名切换（JavaScript addClass）等。没有状态变化，它就完全不生效。
- 写好了
transition: all 0.3s，但没加:hover或没改 class？→ 看不到任何效果 - 改了颜色但没写
transition: color 0.3s？→ 颜色瞬间跳变，没有渐变过程 - 想让元素一加载就动？
transition做不到，它不监听初始渲染
animation 是主动声明的播放流程
animation 是你提前定义好关键帧（@keyframes），再通过属性控制它何时、如何播放。它可以自动开始、循环、暂停，甚至不需要用户交互。
- 用
animation: slideIn 1s ease-out+@keyframes slideIn {...}，元素加载后就能自己滑入 - 配合
animation-delay可以错开多个动画启动时间 - 用
animation-play-state: paused还能手动控制暂停/继续
一个对比小例子
让按钮背景色从蓝变红：
立即学习“前端免费学习笔记（深入）”；
-
用 transition：必须写
button { background: blue; transition: background 0.4s; } button:hover { background: red; } -
用 animation：定义
@keyframes changeBg { from { background: blue; } to { background: red; } }，再给按钮加animation: changeBg 0.4s forwards;，它就会自己执行一遍
初学者实用判断口诀
想实现效果时，先问自己：
- 这个变化是不是由用户操作（如 hover、点击）或 JS 改样式引起的？→ 优先用
transition - 这个动效是否要自动播放、循环、或包含多步复杂运动（比如弹跳、路径移动）？→ 选
animation - 只想让某个属性平滑变化，且只在两个状态间切？→
transition更轻量、易维护
