animation-duration 控制单次动画循环时长，单位必为 s 或 ms；0s 触发 start 事件但不播放，负值无效；支持小数如 0.3s；继承但建议显式声明；与 delay 配合时总时长=延迟+持续×次数；JS 读取返回字符串需解析；响应式需媒体查询或 JS；过短（1s）显拖沓。
animation-duration 的基本用法
animation-duration 控制的是单次动画循环所花的时间，单位必须是 s（秒）或 ms（毫秒），不能省略单位。设为 0s 时动画不播放（但会触发 animationstart 事件）；设为负值无效，会被浏览器忽略。
- 写成
animation-duration: 2;是非法的，会直接失效 - 支持小数，比如
0.3s或350ms，适合微调交互动画节奏 - 可继承，但通常不建议依赖继承，显式声明更可控
和 animation-delay 配合时的常见误解
很多人以为 animation-delay 是“延迟后开始，再持续 animation-duration 时间”，其实它只影响启动时机，不影响总耗时。整个动画生命周期 = 延迟时间 + 持续时间 × 播放次数（animation-iteration-count）。
- 若设
animation-delay: 1s; animation-duration: 0.5s; animation-iteration-count: 3;，则从第 1 秒开始，每 0.5 秒播一帧，共播 3 次，结束于第 2.5 秒 - 动画元素在延迟期间仍处于初始状态，不会提前渲染终点样式
- 用
getComputedStyle(el).animationDuration读取时，返回的是 CSS 字符串（如"0.5s"），不是数字，需自行解析
响应式场景下 duration 动态调整的限制
CSS 本身不支持根据屏幕尺寸缩放 animation-duration（不像 font-size 可用 clamp()），必须靠媒体查询或 JS 注入。
- 媒体查询中可重写：@media (max-width: 768px) { .fade { animation-duration: 0.2s; } }
- 不能在
@keyframes内部引用animation-duration，它是外部控制属性，与关键帧定义无关 - 用 JS 修改时，推荐操作
style.animationDuration而非 class 切换，避免重排抖动
duration 设得太短或太长的实际影响
低于 100ms 的 animation-duration 很难被用户感知为“动画”，容易变成闪烁或卡顿；超过 1s 在多数 UI 动画中会显得拖沓，尤其在按钮反馈、菜单展开等即时交互中。
立即学习“前端免费学习笔记（深入）”；
- 按钮悬停缩放：推荐
0.15s ~ 0.25s，兼顾响应感和可识别性 - 页面路由过渡：常设
0.3s ~ 0.5s，太短像跳变，太长让用户等待 - 配合
will-change: transform可提升高频率 duration（如60fps下的16.7ms帧间隔）渲染稳定性，但别滥用
animation-duration 看似简单，但和 timing-function、硬件加速、JS 触发时机混在一起时，很容易出现“明明设了 0.3s 却感觉卡住”——这时候得查是否触发了 layout、是否有未卸载的旧动画占着内存，而不是只盯着 duration 数值。 
