animation-delay 属性用于定义动画开始之前的延迟时间。它规定了动画何时开始播放,可以为动画序列中的每个项目设置不同的延迟时间。

语法:
selector {
  animation-delay: time;
}

属性值:

  •  time:

  - 定义动画开始之前的延迟时间,可以使用秒(s)或毫秒(ms)作为单位。可以设置负值,表示动画将在规定的时间内开始执行。

示例:
@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.slide {
  animation: slide-in 1s ease-out;
  animation-delay: 0.5s;
}

在这个例子中,定义了一个名为 slide-in 的动画规则,将元素从左侧移入。然后,通过 .slide 类选择器将这个动画应用到具体的元素上,并使用 animation-delay: 0.5s; 设置了0.5秒的延迟时间,即动画将在0.5秒后开始执行。


转载请注明出处:http://www.zyzy.cn/article/detail/4098/CSS