animation-delay

animation-delay CSS 属性指定从将动画应用于元素开始到开始执行动画之间等待的时间量。动画可以稍后开始，从其开头立即开始，或者立即开始并在动画过程中进行。

试一试

通常使用简写属性 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 滚动驱动的动画 没有影响。

正式定义

初始值0s
应用于所有元素，::before 和 ::after 伪元素
继承否
计算值按指定
动画类型不可动画

正式语法

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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅