负的 animation-delay 不适用，因为它会让动画从中间帧开始播放或直接跳过，导致起始不可控、后续行错乱甚至不触发；应使用非负且递增的延迟值，配合 animation-fill-mode: forwards 和 visibility 控制，确保逐行真正有序淡入。
不能用负的 animation-delay 实现“逐行淡入”——它会让动画在元素挂载时就已提前播放完毕，导致第一行直接全显、后续行错乱甚至完全不触发。
为什么负的 animation-delay 不适用
负延迟不是“倒放动画”，而是让动画从中间某一帧开始播放。比如设 animation-delay: -0.5s 且动画总长 1s，浏览器会直接跳到 50% 进度处渲染，opacity 可能已是 0.5 或更高，起始不可控；更糟的是，若延迟绝对值超过动画时长（如 -1.2s），动画可能被判定为已结束，opacity 直接锁定终态，后续无法再触发入场。
- DOM 渲染时机与负延迟冲突：元素刚插入时 CSS 动画尚未绑定完成，负值易被忽略或截断
-
animation-fill-mode: backwards对负延迟无效，不会补全初始帧样式 - 所有主流浏览器（Chrome 124+、Firefox 125+、Safari 17.4+）均按规范将负延迟解释为“跳过前段”，而非“反向计时”
真正可行的延迟控制方式
必须让每行的动画在 DOM 顺序上“依次触发”，延迟值为非负数，且严格递增：
- 用 JS 动态注入：遍历
p元素，按索引i设置p.style.animationDelay = `${i * 0.3}s` - 纯 CSS 方案：配合
:nth-of-type(n)或自定义属性--index，写成animation-delay: calc(var(--index) * 0.3s)，并确保每个p都有对应style="--index: 1"等手动赋值 - 避免用
margin-top或transform模拟延迟——那只是视觉错位，不是真正的动画时序控制
关键参数匹配原则
动画持续时间与延迟间隔必须错开至少 0.05s，否则人眼会感知重叠或卡顿：
立即学习“前端免费学习笔记（深入）”；
- 推荐组合：
animation-duration: 0.4s+animation-delay: calc(var(--index) * 0.45s) - 若改用 0.3s 动画，则延迟至少取 0.35s，否则第二行动画会在第一行 opacity 达到 0.8 时就开始，观感像“抢跑”
- 所有
p必须统一设置animation-fill-mode: forwards，否则动画结束后opacity会回退到 0
容易被忽略的可访问性陷阱
只靠 opacity 动画，屏幕阅读器仍会立即读出全部文字，且透明元素仍可被聚焦、点击——这不是“逐行呈现”，只是“逐行可见”：
- 起始状态必须是
opacity: 0; visibility: hidden; - 动画中段（如 1%）需设
visibility: visible;，确保过渡期可交互 - 绝不能用
display: none替代visibility，它会切断动画链，导致无法触发forwards
最稳妥的做法是放弃“负延迟”幻想，老老实实按 DOM 顺序正向排布延迟值——多一行代码，少三天调试。
