transition-duration 必须带合法时间单位（如0.3s或300ms）才生效，无单位值（如.3或0.3）会导致整条规则被忽略；需与transition-property配合使用，单独设置无效；不可过渡属性（如display）即使设了duration也无效。
transition-duration 设置多少秒才真正生效
值必须是合法的时间单位，否则整个 transition 声明会被浏览器忽略——不是“没效果”，而是压根不解析这一条规则。
-
transition-duration: 0.3s✅ 合法，300 毫秒 -
transition-duration: 300ms✅ 同样合法，和上面等价 -
transition-duration: .3❌ 缺少单位，整条声明失效 -
transition-duration: 0.3❌ 同样无效，CSS 不接受无单位数值 -
transition-duration: 0s✅ 合法，但动画不播放（即“立即切换”）
注意：0s 和 0 表面相似，但后者完全无效；很多调试时发现“过渡不动”，其实是这里写错了单位。
transition-duration 和 transition-property 搭配出错的典型表现
单独设 transition-duration 没用，它必须和 transition-property（或简写 transition）一起工作。否则浏览器不知道“对哪个属性做多久的过渡”。
- 只写
transition-duration: 0.2s→ 无任何过渡效果 - 写
transition: opacity 0.2s→ 对opacity做 200ms 过渡，隐式包含transition-property: opacity和transition-duration: 0.2s - 写
transition-property: all; transition-duration: 0.2s→ 所有可过渡属性都走 200ms，但性能差、行为难控
推荐始终显式指定属性：比如控制颜色变化就用 transition: color 0.2s，避免 all 带来的意外重绘或卡顿。
立即学习“前端免费学习笔记（深入）”；
transition-duration 在 hover / class 切换中不触发的常见原因
最常被忽略的是：目标属性本身不可过渡。比如 display、height（从 0 到 auto）、font-size（某些旧版 Safari）在特定条件下无法插值。
-
transition: display 0.3s→ 完全无效，display不支持过渡 -
transition: height 0.3s+height: auto→ 大部分浏览器不计算auto的终点值，动画卡在起点 -
transition: opacity 0.3s, transform 0.3s→ 安全，这两个属性硬件加速友好且稳定支持
查兼容性时盯住具体属性，别只看 transition-duration 是否写了。MDN 上每个 CSS 属性页都会注明 “Animatable: yes/no”。
多个 transition-duration 写法冲突时谁生效
当多个 transition 规则作用于同一元素（比如类名叠加、内联样式 + CSS 文件），浏览器按层叠顺序取最后一条完整声明，而不是合并或叠加。
- 样式表里：
.btn { transition: color 0.1s; } - 又写：
.btn.active { transition: background-color 0.4s; } - 结果：激活时只对
background-color做 400ms 过渡，color过渡彻底丢失 - 正确做法：
.btn.active { transition: color 0.1s, background-color 0.4s; }
简写 transition 是“全量覆盖”，不是“增量添加”。想保留原有过渡就得手动拼进去，这点特别容易在组件状态切换时翻车。
