transition-duration必须显式设置非零时间值（如0.3s或250ms），否则默认0s导致无动画；负值会使整条声明失效；多属性过渡时可统一时长或按顺序分别指定；避免使用all和混用简写，调试时优先检查devtools中computed值。

transition-duration 必须显式设置，否则过渡不会动——默认值是 0s，等于“瞬间完成”，视觉上就是无动画。

---

transition-duration 的单位和取值范围

• 只接受时间值：必须带单位，s（秒）或 ms（毫秒），例如 0.3s、250ms
• 不能写 0、none、auto 或空值，否则退化为 0s
• 支持小数，但低于 0.05s（50ms）人眼基本无法分辨，实际意义不大
• 负值非法，会直接让整条 transition 声明失效（浏览器忽略该行）

---

多属性过渡时怎么配 transition-duration

当同时过渡多个 CSS 属性，transition-duration 可以：

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• 写一个值：所有属性共用同一时长
  transition: background-color 0.4s, opacity 0.4s;
• 写多个值：按顺序一一对应，缺省部分回退到 0s
transition: background-color 0.4s, opacity 0.2s, transform 0.6s;

常见错误：

• transition: all 0.3s; 看似省事，但 all 会把不支持过渡的属性（如 display、z-index）也卷进来，徒增计算开销，且无效
• 混用简写和单属性写法，比如 transition: background-color 0.3s; transition-duration: 0.5s;，后者会被前者覆盖（CSS 层叠规则）

---

触发后没动画？先查这三件事

• transition-duration 是否真的写了非零值（检查开发者工具的 computed 面板，看最终生效值是不是 0s）
• 过渡属性是否支持动画：比如 height 从 0 到 auto 不触发过渡；改用 max-height 或 JS 测量真实高度再设死值
• 状态变化是否“可感知”：比如 color 从 #333 到 #333，值没变，自然没动画；或者用了 inherit、unset 这类无法插值的值

---

transition-duration 看似简单，但真正卡住人的往往不是语法，而是它和 transition-property 的绑定关系、以及浏览器对“可动画值”的严格判定。调不出来时，优先打开 DevTools → Elements → Styles，盯着 computed 的 transition-duration 和 transition-property 看实值，比反复改代码更省时间。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！