css 元素动画执行太快怎么办_通过 animation duration 控制时长

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 解决。

立即学习 “ 前端免费学习笔记（深入）”；