css animation 属性详解_控制动画的持续时间与延迟

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、以及是否动到了会触发重排的属性。这些细节不看渲染原理，光靠查文档很难绕过去。