animation-delay设了却没延迟的根本原因是元素未真正进入动画流程，如初始为display:none或刚插入DOM就加动画类，需确保元素初始可见或强制触发重排。
animation-delay 为什么设了却没延迟？
常见现象是写了 animation-delay: 2s，但动画一加载就立刻开始。根本原因不是属性写错，而是元素还没真正进入动画流程：比如初始状态是 display: none、opacity: 0 且没触发重绘，或刚插入 DOM 就加了动画类，浏览器来不及计算延迟计时。
- 确保元素初始可见（
opacity: 1、visibility: visible），或在添加动画类前强制触发重排（如读取offsetHeight） - 别依赖
display: none → block切换来启动动画——这会重置整个动画上下文，animation-delay失效 - 用 DevTools 的 Animations 面板确认状态：延迟期间应显示为 “pending”，而非 “running”
纯 CSS 幻灯片怎么用 animation-delay 控制轮播节奏？
核心是把所有幻灯片叠在同一个容器里，靠 @keyframes 控制 opacity 和 z-index，再用 animation-delay 分配每张图的显隐时机。整套动画周期由 animation-duration 决定，单张停留时间 = 总时长 ÷ 图片数。
- 4 张图、总时长 12s → 每张停留 3s → 关键帧节点设在 0%、25%、50%、75%
- 必须加
animation-iteration-count: infinite，否则只播一次 - 慎用
ease：它会让切换变“慢入慢出”，看起来像卡顿；推荐steps(1, end)或linear
多个幻灯片元素如何批量设置递增 delay？
静态数量（比如固定 5 张）直接用 :nth-child(n)；动态生成（JS 插入）必须在元素创建后、插入 DOM 前设置 style.animationDelay，不能等插入后再查。
- 静态写法示例：
.slide:nth-child(1) { animation-delay: 0s; }、.slide:nth-child(2) { animation-delay: 3s; }…… - 动态写法关键点：循环中
el.style.animationDelay = `${i * 3}s`，然后立即container.append(el) - 别用
:nth-of-type：父容器里只要混一个文本节点或其它标签，序号就全乱 - 延迟值建议用小数（如
0.15s），整秒（1s）容易产生明显停顿感
负值 delay 在幻灯片里有什么实际用处？
animation-delay 支持负值，不是 bug 是 feature。负值让动画从中间某一帧开始，视觉上相当于“已播放 N 秒”，适合做无缝衔接的循环入场效果。
立即学习“前端免费学习笔记（深入）”；
- 比如轮播总时长 12s，想让第二张图入场时接续第一张的末尾状态，可设
animation-delay: -3s - 多个动画并存时，负 delay 也独立生效：逗号分隔的每个 delay 值严格对应各自动画，不叠加也不共享
- JS 动态设置要带单位：
el.style.animationDelay = '-2s'，写-2会被忽略
最容易被忽略的是：animation-delay 只对已激活的 @keyframes 动画起作用——如果元素没渲染、没触发布局、或者动画名拼错，delay 就只是摆设。
