动画播放异常的核心原因是 animation-duration 取值不当：未设置时默认 0s 导致瞬间完成，误写单位如 0.1 或 500 会导致失效；正确写法为 0.3s 或 300ms，建议 >1s 用 s，
动画播放太快或太慢，核心问题通常出在 animation-duration 的取值上。这个属性直接决定整个动画从开始到结束耗时多少秒（或毫秒），改对了，节奏就稳了。
确认当前 duration 值是否合理
先检查 CSS 中是否已设置 animation-duration。没写的话，浏览器会使用默认值 0s，动画瞬间完成，看起来就是“太快”。常见错误还包括误写成 0.1（缺单位）或 500（没写 ms），导致实际为 500 秒，动画“卡住”不动。
- 正确写法：
animation-duration: 0.3s;或animation-duration: 300ms; - 推荐用秒（s）表示 >1s 的动画，毫秒（ms）表示
- 可配合开发者工具实时修改数值，边调边看效果
根据动画类型设定典型时长范围
不同用途的动画，有较公认的舒适时长区间：
- 按钮悬停缩放/颜色变化：0.2s – 0.4s（响应快，不拖沓）
- 模态框淡入+滑入：0.3s – 0.6s（兼顾感知与效率）
- 页面路由过渡（如侧滑）：0.4s – 0.7s（给用户空间理解变化）
- 加载骨架屏循环动画：1.2s – 2s（避免过快造成闪烁感）
结合 timing-function 调整观感节奏
光调 duration 不够——同样是 0.5s，ease-in-out 比 linear 更显“从容”，而 ease-out 结尾放缓，会让动画收得更自然。如果调完 duration 还觉得“突兀”，优先试试换缓动函数：
立即学习“前端免费学习笔记（深入）”；
- 想让入场柔和：用
animation-timing-function: ease-out; - 想强调反馈感（如点击）：用
cubic-bezier(0.2, 0.8, 0.4, 1)加点弹性 - 避免机械感：少用
linear，除非是匀速旋转、滚动等特殊场景
注意 animation-delay 和 iteration-count 的干扰
有时动画“显得慢”，其实是被 animation-delay 卡在等待阶段；或者用了 infinite 但每次循环间隔太长，误以为卡顿。排查时可临时注释掉这两项，专注调试单次 duration。
- 延迟不是动画本身耗时，别把它算进 duration 里
- 循环动画建议搭配
animation-direction: alternate;让往返更连贯
