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

transition 不像 @keyframes 那样「主动播放」，它的心智是监听：你声明「哪些属性、用多久、什么曲线、延迟多少」，之后只要这些属性的值因状态切换而改变——鼠标 :hover / 键盘 :focus / 加减 class / 改内联样式——浏览器就自动在旧值与新值之间补间。下面用一个按钮切换方块的状态，拖动参数看过渡如何变化。

1 · 四个子属性，拼成一条 transition

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

2 · 多属性与简写的顺序坑

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