HTML内animation-duration设置动画持续时间

animation-duration是控制单次动画循环耗时的核心属性，值必须为带单位的s或ms（如0.3s、500ms），0s不播放，负值、无单位（如1）、auto等均为无效值，会导致声明被忽略。

animation-duration 是 CSS 中控制单次动画循环耗时的核心属性，值为 0s（或 0ms）时动画不执行——这不是“暂停”，而是根本不会触发。

animation-duration 的合法值和常见错误

只接受带单位的时间值：s 或 ms，其他单位（如 px、%、em）会导致整条声明被浏览器忽略。

• animation-duration: 0.3s ✅ 合法，推荐的最小感知流畅值
• animation-duration: 500ms ✅ 等价于 0.5s，毫秒写法在 JS 动态设置时更易对齐
• animation-duration: 1 ❌ 缺少单位，无效
• animation-duration: -1s ❌ 负值会被当作 0s 处理
• animation-duration: auto ❌ 不是有效值，CSS 规范未定义

多个动画共存时如何配对 duration

当一个元素同时应用多个动画（通过逗号分隔的 animation-name），animation-duration 必须按相同顺序、用逗号分隔提供对应时长，否则会循环复用已声明的值。

• animation-name: fade, slide, bounce;
• animation-duration: 0.4s, 0.6s; → 第三个动画 bounce 会复用第一个值 0.4s
• 正确写法应为：animation-duration: 0.4s, 0.6s, 0.3s;
• 若某动画不需要时长控制（比如纯状态切换），仍需显式写 0s 占位，避免错位

JS 中读写 animationDuration 的兼容性陷阱

DOM 元素的 style.animationDuration 属性在所有现代浏览器中都可用，但注意：

立即学习“前端免费学习笔记（深入）”；

• 读取时返回字符串（如 "0.4s" 或 "500ms"），不是数字，不能直接参与计算
• 写入时必须带单位，el.style.animationDuration = "0.3" 无效，必须是 "0.3s"
• Firefox 旧版曾支持非标准的 animationDuration 属性（非 CSSOM 接口），现已废弃；统一用 style.animationDuration
• 若动画由 @keyframes 定义但未在元素上启用（即没设 animation-name），style.animationDuration 读取为空字符串，而非默认值 "0s"

真正容易被忽略的是：动画是否播放，不取决于 animation-duration 是否大于零，而取决于它是否与有效的 animation-name 同时存在——缺一不可。哪怕写了 2s，只要 animation-name 是 none 或未声明，动画就静默失效。