transition-duration必须设非零合法时间值（如0.3s或300ms）才生效，无单位或无效值会退化为0s导致无动画；需与transition-property配合使用，且支持多值逗号分隔但须顺序对齐。
transition-duration 必须写非零时间值，否则等于没写——浏览器默认就是 0s，动画根本不会动。
transition-duration 写了但没动画？先查 computed 值
很多人改完 CSS 觉得逻辑没问题，鼠标一 hover 却毫无反应。真实原因往往不是语法错，而是 DevTools 里 computed 面板显示的 transition-duration 最终值是 0s。
- 检查是否误写了
transition-duration: 0;、transition-duration: auto;或空值——这些都会退化为0s - 确认没有被其他
transition简写声明覆盖，比如前面写了transition: background-color 0.2s;，后面再设transition-duration: 0.5s;就无效 - 看
transition-property是否真包含你改的那个属性，比如只写了transition-property: opacity;，那改width就不会触发过渡
transition-duration 支持多个值，但顺序必须对齐
当你要给不同属性配不同持续时间时，transition-duration 可以用逗号分隔多个时间值，但它和 transition-property 是按顺序一一对应的。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 写法正确：
transition-property: background-color, opacity, transform;+transition-duration: 0.3s, 0.2s, 0.4s; - 写法危险：
transition-property: background-color, opacity;+transition-duration: 0.3s, 0.2s, 0.4s;——第三个时间值无对应属性，可能被忽略或引发不可预期行为 - 别偷懒用
transition: all 0.3s;：all会把display、z-index这类不支持过渡的属性也卷进来，白耗性能，还可能掩盖真正的问题
JS 动态设置 transition-duration 要注意前缀兼容性
如果用 JS 控制动画时长（比如根据用户偏好切换快慢），直接操作 style.transitionDuration 在现代浏览器够用，但老版本 Safari、Firefox 仍需手动补前缀。
- 推荐写法：
el.style.transitionDuration = '0.25s';（Chrome/Firefox/Edge 100% 支持） - 若需兼容 iOS el.style.webkitTransitionDuration = '0.25s'; 和
el.style.MozTransitionDuration = '0.25s'; - 注意单位必须带
s或ms，el.style.transitionDuration = 250;不生效
最常被忽略的一点：transition-duration 不是孤立起作用的。它必须和 transition-property 搭配，且目标属性的值变化必须是「可插值」的——比如 height: 0px → auto 就不行，max-height: 0 → 500px 才行。调不出来时，别只盯着 duration，先去 Elements 面板里把 transition-property 和 transition-duration 的 computed 值一起拉出来看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
