CSS动画延迟

CSS动画延迟（Animation Delay）是CSS动画模块中的一个关键属性，用于控制动画开始播放前的等待时间。通过调整延迟时间，开发者可以精确控制多个动画的启动顺序或创建复杂的动画序列。

基本概念

CSS动画延迟通过animation-delay属性实现，其值为一个时间值（如秒或毫秒）。正值表示延迟指定时间后播放动画，负值则会让动画立即开始，但跳过指定时间的进度。

数学公式表示延迟时间对动画的影响： 解析失败 (语法错误): {\displaystyle t_{\text{start}} = t_{\text{trigger}}} + \text{delay}} 其中：

• $t_{\text{start}}$ 是动画实际开始时间
• $t_{\text{trigger}}$ 是动画触发时间（如页面加载或事件触发）
• $\text{delay}$ 是animation-delay的值

语法与示例

基础语法

  
/* 正延迟：2秒后开始动画 */  
.element {  
    animation-delay: 2s;  
}  

/* 负延迟：立即开始，但从动画的1秒处播放 */  
.element {  
    animation-delay: -1s;  
}

完整动画定义示例

以下代码展示了一个元素从左侧滑入的动画，延迟3秒后执行：

  
@keyframes slideIn {  
    from { transform: translateX(-100%); }  
    to   { transform: translateX(0); }  
}  

.box {  
    animation-name: slideIn;  
    animation-duration: 1s;  
    animation-delay: 3s;  
    animation-fill-mode: both;  
}

输出效果： 1. 页面加载后，元素保持初始状态（在视窗外左侧） 2. 等待3秒 3. 元素在1秒内平滑滑入到最终位置

负延迟的特殊行为

负值会让动画“跳过”指定时间，直接从中间状态开始播放。例如：

  
.box {  
    animation-delay: -0.5s;  
    animation-duration: 2s;  
}

此时动画会立即播放，但跳过了前0.5秒的进度（相当于从25%处开始）。

%% 负延迟的时间轴图示 timeline title 负延迟效果（animation-delay: -0.5s, duration: 2s） section 动画时间轴 0s : 跳过前0.5s 0s --> 1.5s : 播放剩余1.5s动画

实际应用场景

场景1：多元素顺序动画

通过为不同元素设置递增的延迟时间，创建阶梯式动画效果：

  
.item:nth-child(1) { animation-delay: 0s; }  
.item:nth-child(2) { animation-delay: 0.2s; }  
.item:nth-child(3) { animation-delay: 0.4s; }

场景2：交互反馈

按钮点击后延迟显示成功动画：

  
.button-success {  
    animation: fadeIn 0.5s 1s forwards; /* 延迟1秒后淡入 */  
    opacity: 0;  
}

浏览器兼容性

animation-delay被所有现代浏览器支持（包括Chrome、Firefox、Safari、Edge），IE10+部分支持。对于老旧浏览器，需添加前缀：

  
.element {  
    -webkit-animation-delay: 1s; /* Safari/旧Chrome */  
    animation-delay: 1s;  
}

最佳实践

1. 性能考虑：延迟不会减少动画的渲染开销，长时间延迟可能影响用户体验。 2. 可访问性：为运动敏感用户提供prefers-reduced-motion媒体查询支持：

  
@media (prefers-reduced-motion) {  
    .element { animation-delay: 0s; }  
}

参见

• CSS动画基础
• @keyframes规则