animation-duration 值过小（如0.1s–0.3s）会导致动画一闪而过，因人眼难感知；推荐起步设为0.6s或1s，配合缓动函数可延长总时长，多关键帧下duration为整套动画总耗时，非单段间隔。
animation-duration 值太小导致动画一闪而过
动画执行太快，通常是因为 animation-duration 设置过短（比如 0.1s 或 0.3s），浏览器来不及呈现过渡过程。这个属性直接决定整个动画周期耗时，单位支持 s（秒）和 ms（毫秒），但用 ms 容易误估——300ms 看似长，实际只有 0.3 秒，人眼感知就是“闪”。
- 默认值是
0s，不显式设置就等于没动画 - 推荐起步值：从
0.6s或1s开始调试，比300ms更易观察变化 - 如果配合
animation-timing-function使用缓动函数（如ease-in-out），可适当延长总时长，避免头尾突兀
多个关键帧下 duration 不等于单段时长
写多段 @keyframes 时，animation-duration 是整套动画的总耗时，不是每段之间的间隔。比如 0% → 50% → 100% 三个节点，设 animation-duration: 2s，那 0%→50% 和 50%→100% 各占约 1 秒（除非用 steps() 或手动分配百分比时间）。
- 想让某一段更慢？得在
@keyframes中拉长对应百分比区间，例如把关键动作放在 0%→20%，留出 80% 时间做收尾 - 避免写
0%, 100%两帧还设0.2s——这基本等同于无动画，浏览器可能直接跳帧 - 用
animation-iteration-count: infinite调试时，注意总时长太短会导致高频闪烁，干扰判断
动画快还可能是被其他样式覆盖或重置
即使改了 animation-duration，动画仍很快，大概率是 CSS 层叠或 JS 动态样式覆盖了你的设置。常见干扰源：
- 内联样式（
style="animation-duration: 0.1s;"）优先级高于外部 CSS，会直接覆盖 - 使用了
all: unset或all: initial的父元素，会清空子元素的animation相关属性 - JS 中调用
element.style.animationDuration = '0.2s'后未清除，后续 CSS 规则无效 - 某些 UI 框架（如 Ant Design、Element Plus）自带动画 class，可能带固定
duration，需用!important覆盖或查文档禁用
@keyframes slideIn {
0% { transform: translateX(-20px); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
.box {
animation-name: slideIn;
animation-duration: 0.8s; /* 关键：这里改数值 */
animation-timing-function: ease-out;
}
动画真正难调的不是“怎么变慢”，而是“在哪变慢”——关键动作该卡在哪个百分比、哪段需要缓冲、哪段要干脆利落，这些没法靠拉长 duration 解决。
立即学习“前端免费学习笔记（深入）”；
