css动画如何调整动画的持续时间_通过animation-duration属性调节动画速度

css动画需同时满足animation-name、匹配的@keyframes及animation-duration非0才触发；单位选s或ms依场景而定；duration影响节奏感知，需协同timing-function调整；js动态修改需确保动画已挂载。

animation-duration 设置后动画没变化？检查是否遗漏 animation-name

只改 animation-duration 但动画不动，大概率是没配 animation-name 或对应 @keyframes 未定义。CSS 动画必须同时满足三个条件才触发：有 animation-name、有匹配的 @keyframes 规则、且 animation-duration 不为 0s（或 0ms）。

常见疏漏：

• animation-duration: 2s 写了，但忘记写 animation-name: slideIn
• @keyframes slideIn 拼错成 @keyframes sldieIn，导致名称不匹配
• 在媒体查询中覆盖了动画属性，但没同步更新 animation-duration

数值单位用 s 还是 ms？精度和可读性怎么选

两者都合法，但选择取决于场景：

• 大于等于 1s 的常用 s，比如 animation-duration: 1.5s，更易读
• 需要精细控制（如微交互动画）时用 ms，比如 animation-duration: 340ms，避免 0.34s 这类小数带来的视觉误差感
• 注意：0.3s 和 300ms 理论等价，但某些旧版 android webview 对小数秒解析不稳定，建议统一用整数 ms 处理亚秒级动画

animation-duration 影响动画曲线的实际表现吗

不影响曲线形状，但会改变「单位时间内走过的进度比例」。比如 ease-in-out 曲线始终是慢→快→慢，但把 animation-duration 从 2s 缩到 0.5s，意味着加速段和减速段被压缩在更短时间内完成，人眼更容易感知“突兀”。

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

所以调速时建议同步审视 animation-timing-function：

• 快速动画（）慎用 ease-in，容易显得卡顿
• 慢动画（> 3s）避免纯 linear，易显呆板，可加轻微缓动如 cubic-bezier(0.3, 0.8, 0.5, 1)
• 想保持节奏感？直接改 animation-duration，别试图靠拉伸 @keyframes 百分比来“模拟”变速——那会破坏关键帧语义

JS 动态改 animation-duration 为什么有时不生效

直接赋值 element.style.animationDuration = '0.8s' 失效，通常是因为：

• 该元素当前没有正在运行的动画（即 animation-name 为空或为 none），浏览器不会触发重绘
• CSS 中用了简写 animation，它会覆盖单独设置的 animation-duration（简写优先级更高）
• 想动态生效，得先确保动画已挂载：可临时设 animation: none 再恢复，或用 getComputedStyle 触发回流

稳妥做法：

element.style.animation = 'none'; // 清除当前动画 void element.offsetWidth; // 强制回流 element.style.animation = 'slideIn 0.8s ease-out'; // 重设完整动画

动画持续时间不是孤立参数，它和 keyframes 定义、timing function、触发时机紧密耦合。调太快容易丢失意图，调太慢又拖垮反馈感——真正难的是在具体交互上下文中找到那个“刚刚好”的毫秒数。