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 看似简单，但一旦和其他属性配合不当，就容易变成“写了等于没写”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
