CSS3 animation-delay 属性

animation-delay 属性用于规定动画开始之前的延迟时间。延迟时间可以是负值，这将导致动画立即开始，但从动画的中间或末尾开始播放。这个属性可以与 animation-name、animation-duration、animation-timing-function 和 animation-iteration-count 属性一起使用。

语法

animation-delay: time|initial|inherit;

• time：指定动画延迟的时间，可以是秒（s）或毫秒（ms）。
• initial：将属性设置为默认值。
• inherit：继承父元素的值。

值

• time：指定动画延迟的时间，可以是正值或负值。正值表示延迟多长时间后开始动画，负值表示动画会立即开始，但从中间或末尾开始播放。

示例

// www.javascriptcn.com code example
/* 延迟 2 秒后开始动画 */
div {
  animation-name: slidein;
  animation-duration: 3s;
  animation-delay: 2s;
}

/* 立即开始动画，但从中间或末尾开始播放 */
div {
  animation-name: slidein;
  animation-duration: 3s;
  animation-delay: -1s;
}

在上面的示例中，第一个 div 元素将在 2 秒后开始动画，而第二个 div 元素将立即开始动画，但从动画的中间或末尾开始播放。

animation-delay 属性为我们提供了更多控制动画开始时间的选项，可以让我们创建更加复杂和有趣的动画效果。