animation-delay
animation-delay CSS 属性指定了动画开始执行前，从将动画应用于元素之时起等待的时间量。动画可以稍后开始，从其开始时立即开始，或者立即开始并进行到动画的中间。
试一试
animation-delay: 250ms;
animation-delay: 2s;
animation-delay: -2s;
<section class="flex-column" id="default-example">
<div>Animation <span id="play-status"></span></div>
<div id="example-element">Select a delay to start!</div>
</section>
#example-element {
background-color: #1766aa;
color: white;
margin: auto;
margin-left: 0;
border: 5px solid #333333;
width: 150px;
height: 150px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#play-status {
font-weight: bold;
}
.animating {
animation-name: slide;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-iteration-count: 2;
animation-direction: alternate;
}
@keyframes slide {
from {
background-color: orange;
color: black;
margin-left: 0;
}
to {
background-color: orange;
color: black;
margin-left: 80%;
}
}
const el = document.getElementById("example-element");
const status = document.getElementById("play-status");
function update() {
status.textContent = "delaying";
el.className = "";
window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
el.className = "animating";
});
});
}
el.addEventListener("animationstart", () => {
status.textContent = "playing";
});
el.addEventListener("animationend", () => {
status.textContent = "finished";
});
const observer = new MutationObserver(() => {
update();
});
observer.observe(el, {
attributes: true,
attributeFilter: ["style"],
});
update();
通常，为了图方便，可以使用简写属性 animation 一次性设置所有动画属性。
语法
css
/* Single animation */
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;
/* Multiple animations */
animation-delay: 2.1s, 480ms;
/* Global values */
animation-delay: inherit;
animation-delay: initial;
animation-delay: revert;
animation-delay: revert-layer;
animation-delay: unset;
值
<time>-
从动画应用于元素的那一刻起，动画应该开始的时间偏移。这可以以秒 (
s) 或毫秒 (ms) 为单位指定。单位是必需的。正值表示动画应在指定的持续时间过去后开始。默认值
0s表示动画应在应用于元素后立即开始。负值会导致动画立即开始，但会从其周期的中间部分开始。例如，如果将
-1s指定为动画延迟时间，则动画将立即开始，但会从动画序列的第 1 秒开始。如果为动画延迟指定负值，但起始值是隐式的，则起始值取自动画应用于元素的那一刻。
备注： 当你在一个 animation-* 属性上指定多个逗号分隔的值时，它们会按照 animation-name 出现的顺序应用于动画。对于动画数量和 animation-* 属性值不匹配的情况，请参见设置多个动画属性值。
注意：animation-delay 对CSS 滚动驱动动画没有影响。
正式定义
正式语法
animation-delay =
<time>#
示例
设置动画延迟
此动画有 2 秒的延迟。
HTML
html
<div class="box"></div>
CSS
css
.box {
background-color: rebeccapurple;
border-radius: 10px;
width: 100px;
height: 100px;
}
.box:hover {
animation-name: rotate;
animation-duration: 0.7s;
animation-delay: 2s;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
结果
将鼠标悬停在矩形上以启动动画。
有关示例，请参阅 CSS 动画。
规范
| 规范 |
|---|
| CSS 动画级别 1 # animation-delay |
浏览器兼容性
加载中…