transition-property / duration / timing-function / delay · 简写

入门：状态之间的隐式动画

transition 不像 @keyframes 那样主动播放，它的心智是监听：先声明「哪些属性、用多久、什么曲线、延迟多少」，之后只要这些属性的值因状态切换而改变——鼠标 :hover、键盘 :focus、加减 class、改内联样式——浏览器就自动在旧值与新值之间补间。

1 · 四个子属性

transition-property 决定过渡哪些属性（all 写起来简便，但会把意外的属性也一起补间，代价高）；transition-duration 决定多久；transition-timing-function 决定什么快慢曲线；transition-delay 决定等多久再开始。它们也能合并成简写。

图 1-1 · 一个方块在 hover 前后的过渡。可拖动四个参数，实时看曲线与时长如何改变观感。

2 · 多属性与简写的顺序

多条过渡用逗号分隔，各自可有不同时长与曲线。简写 transition: property duration timing-function delay 里两个时间值按出现顺序解释：第一个是 duration，第二个才是 delay。写反了过渡会「迟迟不动」，却不报任何错。

图 2-1 · 简写与展开写法的对照。可切换参数，看生成的 CSS 如何变化。

建议 · 把 transition 理解成「声明加监听」而不是「播放」，很多行为就自然了：它没有播放头、不能循环、不会自动开始，只在被监听属性的值发生变化的那一刻补间一次。所以它和状态天然绑定（hover、focus、class、内联样式），也因此半路可逆。需要自动播放、循环或多关键帧时用 animation，二者取舍见 transition vs animation。