View in EnglishAlways switch to English

animation-delay

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年9月⁩.

animation-delayCSS 属性指定从应用动画到元素开始执行动画之前等待的时间量。动画可以稍后开始、立即从开头开始或立即开始并在动画中途播放。

尝试一下

animation-delay: 250ms;

animation-delay: 2s;

animation-delay: -2s;

<section>  <div>Animation <span></span></div>  <div>Select a delay to start!</div></section>

#example-element {  background-color: #1766aa;  color: white;  margin: auto;  margin-left: 0;  border: 5px solid #333;  width: 150px;  height: 150px;  border-radius: 50%;  display: flex;  justify-content: center;  align-items: center;  flex-direction: column;}#playstatus {  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%;  }}

"use strict";window.addEventListener("load", () => {  const el = document.getElementById("example-element");  const status = document.getElementById("playstatus");  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

/* 单个动画 */animation-delay: 3s;animation-delay: 0s;animation-delay: -1500ms;/* 多个动画 */animation-delay: 2.1s, 480ms;/* 全局值 */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-* 属性值不匹配的情况，请参见设置多个动画属性值。

形式定义

初始值	`0s`
适用元素	all elements,`::before` and`::after`pseudo-elements
是否是继承属性	否
计算值	as specified
动画类型	Not animatable

形式语法

animation-delay =
<time>#

示例

设置动画延迟

这个动画有 2 秒的延迟。

HTML

html

<div></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);  }}