CSS animation-delay 属性指定动画的开始。
动画可以稍后开始，在开始后立即开始，或者在动画进行到一半时立即开始。
animation-delay 属性是 CSS3 属性之一。
默认值为 0。
允许使用负值。
当使用负值时，动画将开始播放，就好像它已经播放了 N 秒/毫秒。
当为任何动画属性指定多个逗号分隔值时，它们将以不同的方式添加到动画名称中定义的动画。
如果动画的关键帧具有隐式起始值，则将从动画开始时开始获取这些值。
| 初始值 | 0s |
|---|---|
| 应用于 | 所有元素，也适用于::before 和 ::after伪元素 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS3 |
| DOM 语法 | object.style.animationDelay=“1s”； |
CSS animation-delay 属性值说明
| 值 | 说明 |
|---|---|
| time | 定义动画开始前等待的秒数或者毫秒数。它是可选的。 |
| initial | 将属性设置为其默认值。 |
| inherit | 从父元素继承属性。 |
语法
animation-delay: time | initial | inherit;
动画延迟属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: #1c87c9;
position: relative;
animation: delay 5s infinite;
animation-delay: 3s;
}
@keyframes delay {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>动画延迟示例</h2>
<p>在3秒后开始动画</p>
<div></div>
</body>
</html>
具有负值的 animation-delay 属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #ccc;
position: relative;
animation: delay 5s 1;
animation-delay: -2s;
}
@keyframes delay {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>使用负值的动画延迟</h2>
<p>动画开始播放时，就好像它已经播放了 2 秒钟。</p>
<div></div>
</body>
</html>
以毫秒为单位指定的 animation-delay 属性示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: #8ebf42;
position: relative;
animation: delay 5s 1;
animation-delay: 200ms;
}
@keyframes delay {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>使用毫秒为单位</h2>
<p>将延迟200毫秒</p>
<div></div>
</body>
</html>
日期：2020-06-02 22:14:23 来源：oir作者：oir