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，意味着加速段和减速段被压缩在更短时间内完成，人眼更容易感知“突兀”。
立即学习“前端免费学习笔记（深入）”；
