动画播放异常的核心原因是 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; 让往返更连贯