transition-duration用于控制CSS过渡动画的持续时间，单位必须为秒（s）或毫秒（ms），不可省略；可为单属性或多个属性分别指定时长，需与transition-property配合生效，0s表示瞬间完成而非禁用。

transition-duration 控制动画持续时间

过渡效果的时间长短，由 transition-duration 决定，单位只能是 s（秒）或 ms（毫秒），不能用 px% 或其他单位。它不是“越长越好”，而是要匹配用户操作节奏：按钮悬停通常 0.2s–0.4s，页面级淡入可设 0.6s–1s。

• 写法必须带单位，transition-duration: 0.3; 是无效的，浏览器会忽略整条 transition 声明
• 可以同时设置多个属性的不同时长，用逗号分隔：transition: background-color 0.2s, transform 0.4s;
• 如果只写 transition: all 0.3s;，所有可过渡属性都共用这个时长，容易导致颜色变和位移不同步
• 设为 0s 不等于禁用过渡——它仍会触发重排/重绘，只是“瞬间完成”，可能干扰调试

为什么改了 duration 却没变化？

常见原因是 transition-property 没配对，或者起始/结束状态值相同。比如给 display 加 duration 没用，因为该属性不可动画；又比如 opacity: 1 → opacity: 1，值没变，duration 再长也白搭。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 优先检查是否漏写了 transition-property，例如只写 transition-duration: 0.3s; 而没配 transition-property: opacity;，整个 transition 不生效
• 用 DevTools 的 Styles 面板确认：鼠标悬停后，目标元素的 computed 样式里，对应属性（如 background-color）是否真在变化
• 避免在 JS 中连续修改样式后立刻读取，比如 el.style.opacity = '0'; el.style.opacity = '1'; —— 浏览器可能合并渲染，跳过过渡过程

transition-delay 影响的是“什么时候开始”，不是“持续多久”

transition-delay 和 transition-duration 容易混淆。前者决定动画延迟启动的时间（比如悬停后等 100ms 再动），后者才管动多快、动多久。两者叠加，总耗时 = delay + duration，但 delay 不参与动画曲线计算。

• delay 支持负值，例如 transition-delay: -0.1s; 表示从悬停那一刻起，动画已进行 100ms，常用于衔接多个元素的错峰入场
• delay 对 :hover 触发的过渡最实用；对 class 切换类场景，需注意 JS 添加 class 后是否留出重排机会，否则 delay 可能被跳过
• 不要用 delay 替代 duration 来“延长动画感”——它只是推迟起点，真正动起来的时间还是由 duration 控制

过渡效果的精细控制，关键不在堆参数，而在于明确“谁在变、从哪到哪、何时开始、动多快”。transition-duration 看似简单，但一旦和其他属性配合不当，就容易变成“写了等于没写”。