transition vs animation · 选型

transition vs animation：什么时候用哪个

两者都在做补间，边界却很清楚。transition 是两状态之间、由状态变化触发、隐式、天生可逆；@keyframes animation 是多关键帧、可自动播放与循环编排、显式。一句话：需要「响应交互、来回切换」用 transition；需要「自己动起来、循环或多步序列」用 animation。

1 · 同一个放大效果的两种写法

图 1-1 · 左侧 transition 只在触发（按钮或 hover）时放大、放开就回去，不会自己动；右侧 animation 挂上去就自动循环脉冲，不需要任何触发。

2 · 对照表

表 2-1 · 六个维度上的差别。
维度	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，进出场见入场与出场，可逆性见可打断。