CSS | animation-delay 属性

在 CSS 动画中， animation-delay 属性用于设置动画开始的时间。通过控制 animation-delay 属性，我们可以让动画在一个特定的时间点开始，从而实现更加细致的动画效果。

语法

animation-delay 属性的语法如下：

animation-delay: time | initial | inherit;

其中：

• time：表示动画的延迟时间，可以使用秒（s）或毫秒（ms）作为单位。
• initial：表示将属性值重置为默认值。
• inherit：表示从父元素继承属性值。

示例

以下是一个简单的 animation-delay 属性的示例，其中 animation-delay 属性被设置为 2s：

.box {
  animation-name: move;
  animation-duration: 3s;
  animation-delay: 2s;
}

@keyframes move {
  from {transform: translateX(-100%)}
  to {transform: translateX(100%)}
}

在上面的示例中，动画将在 2 秒后开始播放。也就是说，动画将会持续 3 秒，并在动画开始 2 秒后开始播放。

注意事项

• 如果您同时设置了多个动画，那么它们将按顺序播放，而第二个动画将在第一个动画结束后开始播放。如果您需要同时播放多个动画，请考虑使用 animation-play-state 属性。

• animation-delay 属性的默认值为 0s，即动画立即开始播放。

• 如果您需要设置多个动画的延迟时间，可以为每个动画设置不同的 animation-delay 值，或者为它们设置共同的父元素并为父元素设置 animation-delay 值。

• animation-delay 属性可以与其他 CSS 动画属性一起使用，比如 animation-name、animation-duration、animation-timing-function 等等。

结论

通过 animation-delay 属性，我们可以控制 CSS 动画的开始时间，从而实现更加复杂的动画效果。