css动画怎么设置延迟执行_css动画延迟效果实现方法

animation-delay用于设置css动画开始前的等待时间，支持s/ms单位及负值；可与多动画组合使用，需注意参数顺序和声明方式；区别于transition-delay，后者仅作用于属性过渡且不支持循环。

animation-delay 设置动画延迟时间

CSS 动画的延迟执行，核心就是 animation-delay 这个属性。它定义动画在开始播放前等待的时间，单位可以是 s 或 ms，支持负值（负延迟会让动画从中间某一帧开始播放）。

• 正数延迟：比如 animation-delay: 0.5s，表示动画在样式生效后等 500 毫秒再启动
• 负数延迟：比如 animation-delay: -1s，表示动画直接从第 1 秒处的画面开始播放（前提是动画时长 ≥ 1s）
• 可与 animation-name、animation-duration 等组合使用，单独设 animation-delay 不会触发动画

多个动画如何分别设置不同延迟

当一个元素同时应用多个 @keyframes 动画时，需用动画全写语法或分开声明，避免延迟被覆盖。

div {   animation:      slideIn 0.6s ease-out 0.2s forwards,     fadeIn 0.4s ease-in 0.5s forwards; }

上面写法中，slideIn 在 0.2s 后开始，fadeIn 在 0.5s 后开始 —— 注意逗号分隔、每个动画的四个参数顺序固定：name duration timing-function delay。

• 如果用简写 animation，必须保证每个动画的参数数量一致，否则解析失败，浏览器可能只执行第一个动画
• 也可拆成多行写（更清晰）：animation-name: slideIn, fadeIn; + animation-duration: 0.6s, 0.4s; + animation-delay: 0.2s, 0.5s;
• 别漏掉 forwards 等填充模式，否则延迟结束后元素可能闪回初始状态

transition-delay 和 animation-delay 的区别

容易混淆的是 transition-delay，它只对 CSS 属性变化（如 hover 改 opacity）起作用，不是真正意义上的“动画”，也不支持关键帧。

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

• transition-delay: 0.3s 只在触发过渡（比如鼠标移入）之后等 0.3s 才开始渐变，且只生效一次
• animation-delay: 0.3s 是为整个 @keyframes 动画设定启动偏移，可配合 animation-iteration-count: infinite 循环，每次循环都受该延迟影响（除非设为 animation-fill-mode: backwards）
• 二者不能混用在同一个动画逻辑里；想做延迟入场 + 循环动效，必须用 animation 系列属性

延迟失效的常见原因

写了 animation-delay 却没看到延迟效果？大概率是以下几类问题：

• 忘记写 animation-duration：没有时长，动画默认为 0s，延迟自然不可见
• 父元素或自身有 display: none：元素未渲染，动画计时器不启动；改用 visibility: hidden 或 opacity: 0 配合 animation-fill-mode: forwards
• js 动态加 class 时机太早：比如在 dom 插入后立刻加动画 class，但此时样式尚未计算完成；可包一层 requestAnimationFrame 或用 setTimeout(..., 0) 错峰触发
• 浏览器兼容性：IE10+ 支持标准 animation-delay，但旧版 safari 需要 -webkit-animation-delay 前缀（现在基本可忽略）

延迟本身很简单，但和渲染时机、样式优先级、JS 执行节奏搅在一起时，最容易卡住——调试时先确认动画是否真被触发（DevTools 的 Animations 面板能直观看到计时器状态）。