CSS animation-delay 属性确定启动动画所花费的时间。它以秒或毫秒为单位指定。
正值会引入时间延迟，而负值会更早地开始动画，在上述持续时间内播放。零表示没有延迟，动画立即开始。
语法
animation-delay: time | initial | inherit;
属性值
| 值 | 描述 |
|---|---|
| time | 以秒或毫秒为单位指定。 可以使用正值和负值。 正值会引入时间延迟。 负值使动画在上述时间内显示为正在播放。 零表示立即播放，是默认值。 这是一个可选字段。 |
| initial | 这会将属性设置为其初始值 |
| inherit | 这将继承父元素的属性 |
CSS animation-delay 属性示例
下面列出的示例将说明 animation-delay 属性
为动画设置无延迟
在这个例子中，考虑了一个没有延迟的盒子。盒子向前进方向移动，没有任何延迟。
例
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.animated-box {
padding: 20px;
background-color: #edb753;
color: #fff;
animation: slideIn;
animation-duration: 3s;
}
</style>
</head>
<body>
<h3>CSS animation-delay Property</h3>
<div class="animated-box">
Animation without Delay
</div><br>
</html>
为动画设置正时间延迟
在这个例子中，我们考虑一个具有正时间延迟的盒子。盒子在 2 秒后开始向前移动，因为施加的延迟为 2 秒
例
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.animated-box {
padding: 20px;
background-color: #edb753;
color: #fff;
animation: slideIn;
animation-duration: 2s;
}
.animated-box-delayed {
animation-delay: 2s;
}
</style>
</head>
<body>
<h3>CSS animation-delay Property</h3>
<div class="animated-box animated-box-delayed">
Animation with Postitive Delay
</div><br>
</html>
为动画设置负时间延迟
在这个例子中，我们考虑一个具有负时间延迟的盒子。按照规定，盒子似乎已经移动了 1 秒。
例
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.animated-box {
padding: 20px;
background-color: #edb753;
color: #fff;
animation: slideIn;
animation-duration: 4s;
}
.animated-box-delayed {
animation-delay: -1s;
}
</style>
</head>
<body>
<h3>CSS animation-delay Property</h3>
<div class="animated-box animated-box-delayed">
Animation with Negative Delay
</div><br>
</html>
支持的浏览器
| 属性 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| animation-delay | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
