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、触发时机紧密耦合。调太快容易丢失意图，调太慢又拖垮反馈感——真正难的是在具体交互上下文中找到那个“刚刚好”的毫秒数。
