CSS animation-delay 语法
在 CSS 中，animation-delay 属性用于定义动画开始播放前的延迟时间。
语法：
animation-delay: 时间;说明：
animation-delay 的取值是一个时间值，单位为 s（秒）或 ms（毫秒），也可以取小数，默认值为 0。也就是说，如果没有显式定义 animation-delay 时，动画会在页面加载完成后立即开始执行。
此外，animation-delay 可以使用负值（如 -2s）。当设置负值时，动画会立即开始，但会跳过指定的时间。例如 animation-delay: -2s，此时动画会直接从第 2 秒的状态开始播放，就像它早在 2 秒前就已经触发了一样。
当 animation-name 属性指定了多个动画时，animation-delay 属性也应提供对应数量的延迟时间值，并使用英文逗号（,）分隔。这些时间值会按顺序与 animation-name 中的动画一一对应。比如：
/* 应用多个动画，并指定各自的延迟时间 */
.element {
animation-name: slideIn, fadeIn;
animation-duration: 1s, 2s;
animation-delay: 0.5s, 1s; /* slideIn 延迟 0.5s，fadeIn 延迟 1s */
}提示: animation-delay 属性适用于所有元素，包括伪元素（比如 ::before 和 ::after）。
CSS animation-delay 摘要
| 属于 | CSS 动画 |
|---|---|
| 使用频率 | 高 |
| 是否继承 | 否 |
| 默认值 | 0s |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS animation-delay 示例
接下来，我们通过一个简单的例子来讲解一下 animation-delay 属性是如何使用的。
示例：animation-delay 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
@keyframes mytranslate {
0% {}
100% { transform: translateX(260px); }
}
.ball {
width: 40px;
height: 40px;
border-radius: 20px;
background-color: red;
animation-name: mytranslate;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 2s; /* 设置动画在页面打开之后延迟 2s 开始播放 */
}
.container {
display: inline-block;
width: 300px;
border: 1px solid silver;
}
</style>
</head>
<body>
<div class="container">
<div class="ball"></div>
</div>
</body>
</html>页面效果如下图所示。
分析：
这里使用 animation-delay 属性定义动画的延迟时间为 2 秒，也就是说当页面打开后，动画需要延迟 2 秒才会开始执行。
animation-name: mytranslate;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 2s;对于上面代码来说，可以简写为以下一行代码。
animation: mytranslate 2s linear 2s;animation 是一个复合属性
在 CSS 中，animation 是一个复合属性，它包含以下子属性（如下表所示）。
| 子属性 | 说明 |
|---|---|
| animation-name | 定义要应用的动画名称 |
| animation-duration | 定义动画的持续时间 |
| animation-timing-function | 定义动画的速度曲线 |
| animation-delay | 定义动画的延迟时间 |
| animation-iteration-count | 定义动画的重复次数 |
| animation-direction | 定义动画的方向 |
| animation-play-state | 定义动画的播放状态（运行或暂停） |
| animation-fill-mode | 定义动画在播放之前和之后如何应用样式到元素 |
