transition vs animation：什么时候用哪个
两者都在做补间，边界其实很清楚。transition = 两状态之间、由状态变化触发、隐式、天生可逆；@keyframes animation = 多关键帧、可自动播放 / 循环 / 编排、显式。一句话：需要「响应交互、来回切换」用
transition；需要「自己动起来、循环或多步序列」用 animation。
1 · 同一个「放大」效果，两种写法
左：transition——只在你触发（按钮 / hover）时放大，放开就回去，不会自己动。右：animation——挂上去就自动循环脉冲，不需要任何触发。
2 · 对照表
| 维度 | transition | @keyframes animation |
|---|---|---|
| 触发方式 | 属性值因状态改变而触发 | 挂上即按 animation-* 自动开始 |
| 关键帧 | 只有「旧值 → 新值」两端 | 任意多关键帧 + offset |
| 循环 / 自动播放 | 不能 | 可 （infinite / 自动） |
| 半路打断 | 天生平滑反向 | 撤销即跳回 / 重启 |
| 入场 / 出场 | 需 @starting-style + allow-discrete |
@keyframes + forwards 直接定义 |
| 典型场景 | hover / focus / 展开收起 / 主题切换 | loading / 循环装饰 / 入场序列编排 |
选型口诀:「两状态、要可逆、跟交互走」→ transition；「自己动、要循环、多步编排」→ animation。二者不互斥，常同页共用（交互反馈用 transition、循环装饰用 animation）。@keyframes 的八个 animation-* 子属性、scroll-driven、@starting-style 等完整能力见
CSS Animation 系列；两者底层都是「时间 → 值」的补间，把这套从零讲解的是 动画引擎原理系列。
回到 transition 本身：它的可过渡性边界见可过渡性，曲线塑形见timing-function，进出场见入场与出场，可逆性见可打断。