当 animation-delay 为负值时，动画从计算出的进度百分比处瞬时跳转开始播放，如 duration: 2s、delay: -0.5s 则从 25% 进度起始，后续仍正向完整循环。
animation-delay 为负值时，动画从哪一帧开始？
负的 animation-delay 不是“倒放”，而是让动画 ** 跳过开头一部分，直接从中间某个时间点切入播放 **。浏览器会按动画总时长（animation-duration）和延迟值计算出起始进度百分比：比如 animation-duration: 2s，animation-delay: -0.5s，就等价于从 25% 进度（0.5 / 2 = 0.25）处开始执行。
- 这个起始点是 ** 瞬时跳转 **，不触发该阶段之前的
@keyframes中间状态（比如从 0% → 25% 的过渡不会发生） - 若负延迟绝对值 ≥ 动画时长（如
delay: -3s在 2s 动画上），浏览器会不断循环“回退”，最终停在等效的正余数位置（-3s ≡ 1s，即从 50% 开始） - 注意：跳转只影响 ** 初始渲染帧 **，后续仍按正常方向、节奏继续播放
为什么用负 delay 而不是直接改 keyframes 的 0%？
因为 0% 是动画逻辑起点，改它会影响所有循环——而负 animation-delay 只控制 ** 首次进入时机 **，后续循环仍从 0% 开始。适合需要“错峰启动”但保持循环一致性的场景，比如多个元素 stagger 动画、或让入场动画接续上一个已运行中的状态。
- 若你只想让第一次播放“跳过前半段”，但之后每次循环都完整跑，负 delay 是最轻量解法
- 如果所有循环都要跳过（比如永远不显示 0%→30% 的缩放过程），那就该删减或重写
@keyframes，而不是依赖 delay - 负 delay 对
animation-fill-mode有影响：当设为backwards或both时，元素会应用0%关键帧样式——哪怕 delay 是负的；这可能导致视觉“闪一下”再跳到中间状态
常见错误：动画没如预期从中间开始
最常踩的坑不是 delay 值算错，而是忽略了动画的 ** 触发时机 ** 和 ** 样式继承关系 **。
- 元素还没插入 DOM 或还没计算样式（比如 JS 动态添加后立刻加 class），负 delay 可能被忽略或表现异常
- CSS 自定义属性（
--my-delay）传入animation-delay时，若变量未定义或类型错误（如字符串 “–0.5s” 少了负号），会降级为0s - 使用
animation-play-state: paused后再 resume，负 delay ** 只生效一次 **——暂停后再恢复，会从当前帧继续，不再重新跳转 - 某些旧版 Safari（≤15.4）对大负值（如
-999s）解析不稳定，建议限制在合理范围（如不超过 -10× duration）
兼容性与性能提醒
负 animation-delay 在所有现代浏览器中完全支持（Chrome 43+、Firefox 16+、Safari 9+、Edge 12+），但要注意两点：
立即学习 “ 前端免费学习笔记（深入）”；
- 它不会减少重绘次数或 GPU 占用——跳过的那部分帧虽不执行，但动画计时器照常运行，CPU/GPU 开销和完整播放几乎一致
- 服务端渲染（SSR）或首屏直出时，若 CSS 中写了负 delay，而 JS 还没接管，可能出现“初始帧突兀跳变”，建议配合
opacity: 0+transition做渐进式入场 - 不要用负 delay 模拟“倒播”效果——真要倒放，请用
animation-direction: reverse或 JS 控制animation-play-state和animation-timing-function
负 delay 看似简单，但它的行为高度依赖 timing 函数、fill mode 和触发上下文。调的时候别只看最终效果，用 DevTools 的 Animation 面板拖动时间轴，确认起始帧是否真的落在你算的那个百分比上。
