transition-duration生效需满足：触发可过渡属性的计算值变化，正确设置单位（s/ms），配合transition-property或简写，且初终态值不同；多属性可分别设时长，媒体查询和伪类中动态修改有效。
transition-duration 设置后没生效？先确认是否触发了样式变化
CSS transition-duration 只在元素的可过渡属性（如 color、opacity、transform、width 等）发生**计算值变化**时才起作用。单纯写上 transition-duration: 2s 并不会让元素“自动动起来”。
常见误操作：
- 只写了
transition-duration，但没配transition-property或transition简写 - 目标样式被 JavaScript 强制重写（比如直接改
style.left），绕过了 CSS 计算流程 - 初始状态和终态的值完全相同（例如都设为
opacity: 1），浏览器不触发重排重绘
transition-duration 的单位和取值范围怎么用才稳
transition-duration 接受时间值，单位只能是 s（秒）或 ms（毫秒），不支持百分比、em 或无单位数字。
合法写法示例：
立即学习“前端免费学习笔记（深入）”；
transition-duration: 0.3s; transition-duration: 300ms; transition-duration: 0s; /* 允许，表示禁用过渡（但保留 transition 其他配置）*/
非法写法（会整个声明失效）：
-
transition-duration: 300;（缺单位） -
transition-duration: 0.3;（同上） -
transition-duration: 300px;（单位错误）
多个属性过渡时，duration 是统一控制还是分别设置
如果用简写 transition，transition-duration 默认作用于所有指定的 transition-property；但也可以为不同属性单独配时长，用逗号分隔：
transition-property: opacity, transform; transition-duration: 0.2s, 0.4s; /* opacity 动 200ms，transform 动 400ms */
注意顺序必须严格对应，否则容易错位。更稳妥的做法是拆成多条 transition 声明（现代浏览器均支持）：
transition: opacity 0.2s ease; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
不过后者会覆盖前者——所以实际中推荐用单条简写并确保逗号对齐。
transition-duration 在媒体查询或伪类中动态修改是否有效
有效，且很常用。比如悬停时延长动画时间：
.box {
transition-duration: 0.2s;
}
.box:hover {
transition-duration: 0.5s;
transform: scale(1.1);
}但要注意：这个新时长只影响「从 hover 进入」的过渡；返回默认状态时，仍按原 0.2s 执行（除非也在 :hover 外显式重写）。若想进出一致，得两边都设：
- 进：
.box:hover { transition-duration: 0.5s; ... } - 出：
.box { transition-duration: 0.5s; }（写在基础选择器里）
另外，@media 中修改 transition-duration 同样实时生效，适合响应式场景下适配触屏/桌面的不同交互节奏。
真正容易被忽略的是：transition-duration 不会阻塞 JS 执行，也不保证帧率稳定——它只是告诉浏览器“尽量在 X 秒内完成插值”。如果中间有强制同步布局（比如读取 offsetHeight）或主线程卡顿，实际耗时可能远超设定值。
