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.zyzy.cn/article/detail/5980/CSS