animation-delay负值并非延迟动画启动，而是让动画从指定时间点的关键帧开始播放；它适用于循环动画的相位对齐，如轮播中各元素通过负延迟实现无缝滚动流。
animation-delay负值不是“延迟”，而是“偏移起始帧”
很多人误以为 animation-delay: -1s 是“提前1秒开始”，其实它不改变动画触发时机，只改变播放起点。浏览器在样式生效的那一刻就立即启动动画，但直接跳到第1秒对应的关键帧位置开始渲染——前提是动画总时长 ≥ 1s，否则会被截断或行为未定义。
轮播动效需要无缝循环，负延迟能对齐相位
轮播通常由多个元素共享同一动画（比如 @keyframes slide），每个元素靠 animation-delay 错开启动时间来实现“依次滑入”。但如果所有元素都从0%帧开始，第一帧会集体突变，破坏连贯感。
- 用正延迟（如
0.5s,1s）会导致每项都“等完再播”，首帧空白明显 - 用负延迟（如
-0.5s,-1s）让各元素从不同进度切入，视觉上形成连续滚动流 - 关键点：所有元素的
animation-duration必须一致，且负值绝对值不能超过该时长
实际写法中容易忽略的兼容性与计算陷阱
负延迟本身兼容性很好（Chrome 43+/Firefox 16+/Safari 9+），但以下细节常导致失效：
-
animation-play-state: paused会冻结当前帧，负延迟在恢复播放时不会重新计算起始偏移 - 如果动画使用了
animation-iteration-count: 1，负延迟只影响第一次播放，后续无效果 - 配合
animation-fill-mode: forwards时，负延迟可能导致最终态被错误锁定为中间帧 - 多动画叠加时，
animation简写会覆盖之前单独声明的animation-delay，负值易被意外清空
一个真实轮播片段示例
假设轮播项共4个，总周期3s，希望它们像传送带一样匀速流动：
.carousel-item {
animation: slide 3s infinite linear;
}
.carousel-item:nth-child(1) { animation-delay: 0s; }
.carousel-item:nth-child(2) { animation-delay: -0.75s; }
.carousel-item:nth-child(3) { animation-delay: -1.5s; }
.carousel-item:nth-child(4) { animation-delay: -2.25s; }
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(-100vw); }
}
这里每个负延迟 = -(总时长 / 项数) × (索引 - 1)，确保相位均匀分布。注意：不能直接用 sibling-index() 这类实验性函数，它尚未进入主流支持。
负延迟真正起作用的地方，是当动画本身具备循环性、且你希望多个实例在时间轴上“错峰但不中断”时——它不是偷时间，而是借时间轴做空间化排布。稍一算错数值或漏掉 infinite，整个轮播就会卡顿或跳帧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
