CSS 默认会在属性值改变时立即更新样式，而 transition 提供了在指定时间内平滑过渡的能力。本文将逐一拆解 transition 的五个核心属性，结合可运行示例与效果演示，说明如何正确配置过渡参数、避免常见失效问题，并给出简写语法与多属性组合的最佳实践。
transition-property：指定参与过渡的属性
transition-property 用于声明哪些 CSS 属性会参与过渡效果。其语法如下：
transition-property: none | all | property;
- none：没有任何属性参与过渡。
- all：所有可过渡的属性都会参与过渡。
- property：指定一个或多个属性名，多个属性之间用逗号分隔。
示例代码：
该示例中，仅 width 和 background 会在鼠标悬停时产生过渡效果，其他属性变化将立即生效。
transition-duration：控制过渡持续时间
transition-duration 决定过渡过程需要花费的时间，单位为秒（s）或毫秒（ms）。默认值为 0，若不显式设置，过渡效果将不会生效。
transition-duration: time;
当多个属性参与过渡时，可为每个属性单独指定时间，用逗号分隔；若只提供一个时间值，则所有属性共用该时长。
运行效果如下图所示：
图：transition-duration 属性演示
transition-timing-function：设置过渡动画类型
transition-timing-function 控制过渡过程中的速度曲线，决定动画是匀速、先快后慢还是自定义节奏。可选值如下：
| 值 | 描述 |
|---|---|
| linear | 以始终相同的速度完成整个过渡过程，等同于 cubic-bezier(0,0,1,1) |
| ease | 以慢速开始，然后变快，然后慢速结束的顺序来完成过渡过程，等同于 cubic-bezier(0.25,0.1,0.25,1) |
| ease-in | 以慢速开始过渡的过程，等同于 cubic-bezier(0.42,0,1,1) |
| ease-out | 以慢速结束过渡的过程，等同于 cubic-bezier(0,0,0.58,1) |
| ease-in-out | 以慢速开始，并以慢速结束的过渡效果，等同于 cubic-bezier(0.42,0,0.58,1) |
| cubic-bezier(n, n, n, n) | 使用 cubic-bezier() 函数来定义自己的值，每个参数的取值范围在 0 到 1 之间 |
示例代码：
transition-delay：设置过渡延迟时间
transition-delay 用于定义触发过渡后、实际开始执行前需要等待的时间，单位同样为秒或毫秒。
transition-delay: time;
示例代码：
运行效果如下图所示：
图：transition-delay 属性演示
transition 简写语法与多属性组合
transition 是上述四个属性的简写形式，语法顺序如下：
transition: transition-property transition-duration transition-timing-function transition-delay;
其中 transition-property 和 transition-duration 为必填项，后两项可省略。若需为不同属性配置不同的过渡参数，可使用逗号分隔多组值。
示例代码：
运行效果如下图所示：
图：transition 属性演示
上述简写等价于以下展开写法：
使用简写时需注意：若省略 timing-function 或 delay，浏览器会按默认值处理；多组参数必须严格对应，否则可能出现属性与时间错位的问题。建议在复杂过渡场景中优先使用展开写法，以提升可读性与维护性。
