CSS动画延迟 - CSS

CSS动画延迟可以为元素动画添加延迟时间。在该延迟时间内，元素不会开始执行动画。

语法

animation-delay: time;

属性值

属性值由时间值组成，用秒（s）或毫秒（ms）表示。

例如：animation-delay: 2s;

示例

以下是一个例子，其中动画延迟为2秒：

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

@keyframes example {
  from {background-color: blue;}
  to {background-color: yellow;}
}

说明

上述代码将元素的背景颜色从蓝色变为黄色的动画应用于一个div元素，并将其持续时间设置为4秒。此外，animation-delay被设置为2秒，这意味着动画将在2秒后开始执行。因此，该元素将在2秒后开始从蓝色变成黄色的动画。由于iteration-count设置为无限，所以动画将无限循环。

参考

• CSS动画延迟