animation-delay用于控制动画开始时机，非暂停动画；多元素交错需复用同一@keyframes并为各元素单独设delay值，静态用:nth-child，动态创建时应“创建即配置”style.animationDelay，避免事后遍历。
animation-delay 不是“让动画停住”，而是决定它“什么时候开始”。设错值或混用其他属性，动画就容易跳、卡、不同步。
怎么给多个元素分别设不同的 animation-delay
核心是复用同一套 @keyframes，只改每个元素的 animation-delay 值，别为每个元素写一套动画规则。
- 静态列表（如 5 个
.item）：用:nth-child(n)配合具体数值，例如.item:nth-child(1) { animation-delay: 0s; }、.item:nth-child(2) { animation-delay: 0.3s; } - 动态生成（如 JS 创建的
<img alt="HTML怎么设置animation-delay_HTML animation-delay延迟设置方法【推荐】" >）：在document.createElement()后、append()前立刻设置element.style.animationDelay = (Math.random() * 1.5).toFixed(2) + 's' - 避免事后遍历：不要先批量
appendChild，再querySelectorAll('.animated').forEach(...)—— DOM 渲染有微小延迟，可能漏掉刚插入的节点
animation-delay 负值的实际效果
负值不是“倒播”，而是“跳过开头直接进入动画中间状态”。比如 animation-delay: -2s 且 animation-duration: 4s，动画会从第 2 秒的画面开始播放，看起来像“已经动了 2 秒”。
- 可用于滚动文字“入场即可见”：配合
translateX()关键帧，让文字一出现就在视口中央位置 - 慎用于循环动画（
animation-iteration-count: infinite）：负延迟会让每次循环都“跳过开头”，视觉上可能突兀 - IE 9 及更早版本不支持该属性，需确认兼容范围
和 animation-duration 搭配控制“停留感”
想让文字在中间“停 2 秒”，不能只调 animation-delay；得靠 animation-duration 总时长 + 关键帧里拉长静止段。
立即学习“前端免费学习笔记（深入）”；
- 例如总时长设为
10s，关键帧中30%到70%都设为相同transform: translateX(-100%)，这段就占 4 秒 - 错误做法：只加
animation-delay: 2s——这只是让整个动画晚 2 秒启动，不影响运行中的节奏 - 务必配合
white-space: nowrap和overflow: hidden，否则文字换行或溢出会破坏滚动/停留效果
真正难的不是写对一个 animation-delay，而是当元素数量变多、生成时机不确定、还要响应滚动或输入时，如何保证每个元素的延迟值既独立又可控。这时候“创建即配置”比“统一后处理”可靠得多。
