不会。transition-duration 设为 0s 或 0ms 时浏览器直接跳变，不触发过渡流程，transition-timing-function 和 transition-delay 均无效。
transition-duration 值写成 0 会触发过渡吗？
不会。把 transition-duration 设为 0s 或 0ms，浏览器直接跳变，不走过渡流程——哪怕其他 transition 属性（如 transition-property、transition-timing-function）都配好了。
常见错误现象：元素 hover 后“闪一下”就变色，没动画感，查了半天发现是 transition-duration: 0 残留；或者用 JS 动态设置时，数值计算出错导致结果为 0。
- 合法值必须是正数（
0.1s、50ms），或省略（默认0s） - 单位不能省：
transition-duration: 300是无效的，必须写300ms或0.3s - 设为
0s和完全不写该属性效果一样，但前者更明确意图
多个 transition-duration 怎么对应不同属性？
不能靠顺序匹配。CSS 不按声明顺序把 transition-duration 分给 transition-property，而是按逗号分隔后一一对应——数量不一致时，少的会循环补全。
使用场景：想让 width 动画慢一点（300ms），opacity 快一点（150ms），但写成 transition: width, opacity; transition-duration: 300ms, 150ms 才生效；如果只写一个 300ms，那两个属性都会用 300ms。
立即学习“前端免费学习笔记（深入）”；
- 务必保持
transition-property、transition-duration、transition-timing-function的逗号项数一致 - 推荐拆成独立声明，比如：
transition-property: width; transition-duration: 300ms;+transition-property: opacity; transition-duration: 150ms;（注意：后者会覆盖前者，实际要用单条复合声明） - 更稳妥写法：
transition: width 300ms, opacity 150ms;
transition-duration 在媒体查询里动态改会重置动画吗？
会。只要新规则生效，且 transition-duration 值变了，下一次触发过渡时就会用新时长——但**不会中断正在运行的动画**。
性能影响：频繁切换媒体查询（比如滚动时监听 prefers-reduced-motion）并修改 transition-duration，可能引发样式重计算；不过单纯改这个属性开销极小。
- 典型用法：
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01s !important; } }（用极小值代替0s，避免完全禁用过渡逻辑） - 别在 :hover 伪类里改
transition-duration——它只控制“进入”时长，“离开”仍用原值，容易造成来回不对称 - JS 动态改时，用
element.style.transitionDuration = '200ms'即可，无需重排版
transition-duration 能用 CSS 变量吗？
能，但有兼容性坑。Chrome 46+、Firefox 49+、Safari 10.1+ 支持，IE 全系不支持。
容易踩的坑：变量未定义或语法错误时，整条 transition 声明会失效（不是降级为默认值）；另外，CSS 变量无法在 @keyframes 中被 transition 读取，所以不能靠变量控制动画中途变速。
- 写法示例：
:root { --base-duration: 250ms; } .btn { transition-duration: var(--base-duration); } - 保险做法：提供 fallback，比如
transition-duration: 250ms, var(--base-duration);（注意逗号分隔会触发多值解析，慎用） - 真正需要动态调速时，JS 直接改
style.transitionDuration更可靠
事情说清了就结束。最常被忽略的是：transition-duration 为 0 时，transition-timing-function 和 transition-delay 都不生效——不是“函数没起作用”，而是整个过渡引擎压根没启动。
