transition-duration 是控制 css 过渡时长的唯一核心属性，必须与 transition-property 搭配使用，单位只能是 s 或 ms（如 0.3s 或 300ms），且仅当属性计算值实际变化时才生效。
transition-duration 是控制 CSS 过渡动画时长的唯一核心属性，它不叫“time”也不叫“animation-time”，写错名就完全失效。
transition-duration 必须和 transition-property 搭配才生效
单独设 transition-duration: 0.3s 不会触发任何过渡——浏览器根本不知道你要过渡哪个属性。必须明确指定属性名，或用 all（但慎用）：
button {
background-color: #007bff;
transition-property: background-color;
transition-duration: 0.3s;
}
button:hover {
background-color: #0056b3;
}-
transition-property可以是background-color、transform、opacity等具体值，也支持逗号分隔多个，比如background-color, transform - 用
all虽方便，但容易意外触发无意义的属性变化（比如box-shadow的微小重绘），影响性能 - 现代写法常合并为
transition: background-color 0.3s;，此时transition-property和transition-duration隐式绑定
时间单位只能是 s 或 ms，不能省略单位
transition-duration: 300 是无效的——CSS 不认裸数字。必须带单位：
-
0.3s（推荐，可读性好） -
300ms（等价，适合做精确毫秒级控制） -
1.5s、0.05s都合法；但50、.3、300s（单位过大）都会被忽略
多个过渡阶段要用 transition-delay 配合 duration
如果想实现“先变颜色，0.1 秒后再缩放”，不能只靠一个 transition-duration。得用 transition-delay 错开起始时间：
立即学习“前端免费学习笔记（深入）”；
icon {
transition:
color 0.2s,
transform 0.3s 0.1s; /* 0.1s 后开始 transform 过渡 */
}- 第二个时间值是
transition-delay，不是 duration 的一部分 - 写成
transform 0.3s ease 0.1s时，顺序固定：property duration timing-function delay - delay 为负值（如
-0.1s）会让过渡从中间状态开始，适合“切入即动”的效果，但兼容性和可维护性较差
真正容易被忽略的是：过渡是否触发，取决于「两个状态间该属性是否发生了计算值变化」。比如从 display: none 到 block，display 本身不可过渡；又比如 font-size: clamp(1rem, 2vw, 1.2rem) 在视口缩放时的动态变化，也不会触发 transition——这些都不是 duration 能解决的问题。
