CSS动画延迟技巧全解析

本篇文章给大家分享《CSS动画延迟设置方法详解》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

animation-delay 控制动画开始前的等待时长，不影响持续时间与重复次数；可为正、负或零，需配合 animation-name 和 animation-duration 使用，单位必须明确；负值使动画从中段切入，多动画时支持逗号分隔列表且须与 animation-name 顺序一致。

animation-delay 设置的是动画开始前的等待时长

它不会影响动画持续时间或重复次数，只控制从元素渲染完成到动画第一帧播放之间的空闲间隔。这个值可以是正数（延迟执行）、负数（倒播切入）或 0（立即开始）。

• animation-delay 必须和 animation-name、animation-duration 一起使用才生效，单独写无效
• 单位必须明确，比如 1s 或 500ms，不能只写 1
• 负值会让动画从中间某一帧开始播放，例如 animation-delay: -1s 在 animation-duration: 2s 下，等价于跳过前半段直接从 50% 进度进入

多个动画同时设置不同 delay 的写法

当一个元素应用了多个 @keyframes 动画时，animation-delay 支持用逗号分隔的列表，顺序需与 animation-name 严格对应。

div {
  animation-name: slide, fade;
  animation-duration: 1s, 0.6s;
  animation-delay: 0.3s, 0.8s;
}

上面代码中，slide 动画在元素渲染后 300ms 开始，fade 则等待 800ms 后启动。如果两个动画的 delay 值相同，也可以合并为单个值：animation-delay: 0.5s。

animation-delay 为负数时的实际表现

负延迟不是“提前播放”，而是让动画从某个中间状态切入。浏览器会按比例计算起始位置：假设 animation-duration: 2s，animation-delay: -0.5s，则动画从 25% 进度处开始播放（0.5 / 2 = 0.25）。

• 适用于做“无缝衔接”效果，比如轮播图切换时让新项从中间滑入
• 注意：若关键帧中用了 transform 或 opacity 等属性，负 delay 会导致初始态不等于 CSS 中定义的样式，可能造成闪动
• 调试时可配合 animation-play-state: paused 暂停动画，再用开发者工具拖动时间轴观察起始点

JS 动态修改 animation-delay 容易忽略的细节

通过 JS 修改 style.animationDelay 是可行的，但要注意触发时机和重排问题。

• 直接赋值字符串，如 el.style.animationDelay = '0.4s'，不要漏掉单位
• 如果想让新 delay 生效，需确保动画已处于暂停或已完成状态；否则可能被当前正在运行的动画实例忽略
• 更稳妥的做法是先移除动画类，offsetHeight 强制重排，再加回带新 delay 的类

el.classList.remove('animated');
el.offsetHeight; // 触发重排
el.classList.add('animated-delayed');

CSS 动画的延迟逻辑看似简单，但负值行为、多动画对齐、JS 动态更新这三处最容易出意料之外的效果。

本篇关于《CSS动画延迟技巧全解析》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！