CSS：animation-delay 属性

animation-delay 是 CSS 中用于设置动画延迟开始的属性。通过 animation-delay，你可以指定动画何时开始播放，即在动画效果应用于元素后经过多少时间开始执行。

语法：

animation-delay: time;

time: 规定动画开始之前等待的时间。可以使用秒（s）或毫秒（ms）为单位。默认值为 0。

示例：

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.slide-animation {
  animation: slide 2s ease-in-out 1s infinite alternate;
}

在上述示例中，通过 @keyframes 定义了一个名为 slide 的关键帧动画，然后将这个动画应用于类名为 .slide-animation 的元素。该元素将以 2 秒的时间在 x 轴方向上往右移动 100 像素，采用缓动函数 ease-in-out，动画延迟 1 秒开始，无限循环并在每次循环中轮流正向和反向播放。

animation-delay 属性是用于在动画开始之前创建一定延迟的重要属性，它可以帮助你实现更精细和多样化的动画效果。

转载请注明出处：http://www.pingtaimeng.com/article/detail/5980/CSS