animation-duration 值写成 0.5（无单位）会被浏览器视为无效，降级为 0s，动画瞬间完成；必须使用 0.5s 或 500ms 等带单位的合法值。
animation-duration 值写成 0.5 会怎样？
不加单位直接写 0.5，浏览器会当成无效值，动画时长回退到默认的 0s，相当于没动——你看到的是瞬间完成，不是“半秒”。CSS 规范明确要求时间值必须带单位，s 或 ms 缺一不可。
常见错误现象：animation-duration: 0.5; 看似简洁，实际被忽略；用开发者工具检查会发现该声明被划掉，计算值是 0s。
-
0.5s✅ 合法，半秒 -
500ms✅ 合法，等价于0.5s -
.5s✅ 合法（省略前导零），但可读性差，不建议 -
0.5❌ 无效，降级为0s
animation-duration 设为 0s 还有过渡效果吗？
没有。设成 0s 就等于取消了时间维度，无论 animation-timing-function 是什么，元素都会在下一帧立即跳到终点状态——它不触发重排/重绘的中间过程，也不响应 transition 的缓动逻辑。
使用场景：适合做“开关式”状态切换，比如模态框显隐配合 visibility + opacity，但要注意这会让依赖动画事件（如 animationend）的逻辑立刻触发，可能打乱预期时序。
立即学习“前端免费学习笔记（深入）”；
- 想保留“无感切换”，用
0s+visibility: hidden配合opacity: 0 - 想保留视觉反馈，哪怕极短，至少设
0.01s（注意：IE 不支持小数秒，稳妥起见用10ms） -
0s下animationiteration和animationend仍会触发，但几乎无法捕获中间状态
animation-duration 动态修改时为什么卡顿或跳变？
直接 JS 修改 style.animationDuration 会强制同步触发布局（layout），尤其在循环中频繁设置时，容易引发丢帧。更糟的是，如果新值比当前已运行的动画剩余时间还短，浏览器通常会“硬切”到终点，造成视觉跳变。
性能影响：每次修改都可能触发样式计算 + 布局 + 绘制流水线，比单纯改 transform 或 opacity 代价高得多。
- 避免在
requestAnimationFrame里反复改animationDuration - 想实现变速动画，优先用
animation-play-state: paused+ 重设animation-delay模拟，或改用Web Animations API的updatePlaybackRate() - 若必须动态改时长，确保只改一次，且新值与旧值差异不过大（比如从
2s改到0.3s就容易跳）
animation-duration 在不同浏览器里有兼容性差异吗？
核心行为一致，但边界情况处理不同。Safari（尤其 iOS 15 及更早）对小数值（如 0.001s）支持不稳定，可能四舍五入为 0s；Firefox 对负值（-1s）会静默忽略，Chrome 则报解析警告但依然当 0s 处理。
参数差异：所有现代浏览器都支持 s 和 ms，但不支持 us（微秒）或自定义单位。
- 生产环境别用
的值，iOS Safari 可能失效 - 避免负值，没意义，各浏览器处理不统一
- 用
CSS.supports('animation-duration', '1s')可检测基础支持，但无法覆盖小数精度问题
