animation-duration 控制动画总时长，值越小越快，0s 直接跳终点；animation-delay 控制启动延迟，支持负值实现中途切入；二者在 animation 简写中须严格按序书写，且需注意 fill-mode、属性触发重排等实际影响。
animation-duration 控制动画跑多快
这个属性决定整个动画从开始到结束要花多少秒或毫秒，值越小动画越快，设为 0s 会直接跳到终点（不触发过渡）。
常见误区是把它和 transition-duration 混用——后者只作用于状态变化的瞬间，而 animation-duration 是绑定在 @keyframes 上的完整周期时长。
- 支持小数，比如
0.3s或150ms - 不能为负值，设成负数会被浏览器忽略，退回到默认值
0s - 如果动画里有多个
animation简写声明，animation-duration必须放在简写中第一个位置，否则解析错位
animation-delay 控制动画什么时候开始
animation-delay 是动画启动前的等待时间，可以是正值（延迟播放）、零值（立即开始），也能是负值（从动画中间某帧切入）。
负延迟不是“倒放”，而是让动画从第 -delay × 帧率 对应的位置开始。例如 animation-duration: 2s，animation-delay: -0.5s，就相当于跳过前 25% 的动画直接播放。
立即学习“前端免费学习笔记（深入）”；
- 负值常用于做“无缝续播”或“错峰入场”效果
- 多个动画用相同 delay 容易造成视觉堆叠，建议配合
animation-fill-mode控制起始状态 - 单位必须显式写出，
animation-delay: .3不合法，得写成0.3s
把 duration 和 delay 放进 animation 简写里要注意顺序
animation 是复合属性，语法顺序固定：animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state];
漏掉中间某项会导致后续值被错位解析。比如写了 animation: slide 2s 1s;，浏览器会把 1s 当作 animation-timing-function（非法值），然后把 1s 再当一次 animation-delay，结果不可控。
- 最安全写法：显式补全所有必要项，哪怕用默认值，如
animation: slide 2s ease 1s 1 normal forwards running; - 如果只关心 duration 和 delay，至少保留前四项：
animation: slide 2s ease 1s; - 使用 CSS 预处理器时，避免用变量拼接简写，容易丢项；推荐拆成独立属性写
动画未按预期延迟或卡顿的几个实际原因
即使 animation-delay 和 animation-duration 写对了，仍可能看起来“没延迟”或“卡一下才动”，这往往不是属性本身的问题。
典型诱因包括：
- CSS 选择器优先级低，被其他规则覆盖，检查 computed 样式里
animation-delay是否生效 - 元素初始状态和
@keyframes起始帧（0%）不一致，且没设animation-fill-mode: backwards，导致延迟期间显示空白/原始样式 - 动画属性涉及 layout 触发项（如
width、height、left），浏览器强制同步重排，打断了渲染流水线 - 在低性能设备上，
animation-duration小于 16ms（一帧）时，部分浏览器会合并帧，实际感知不到变化
/* 推荐用 transform + opacity 做高性能动画 */
@keyframes fadeSlide {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}真正难调的不是怎么写 duration 和 delay，而是判断该用哪个时机触发、要不要加 fill-mode、以及是否动到了会触发重排的属性。这些细节不看渲染原理，光靠查文档很难绕过去。
