animation-delay

animation-delay规定动画何时开始。默认是 0。即从动画应用在元素上到动画开始的这段时间的长度。

代表动画在应用到元素上后立即开始执行。否则，该属性的值代表动画样式应用到元素上后到开始执行前的时间长度；

定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始。例如，如果设定值为-1s，动画会从它的动画序列的第1秒位置处立即开始。

animation-delay: 1s;
animation-delay: 3ms;

HTML

<div class="stage">
  <figure class="ball"></figure>
</div>

CSS

@keyframes 'slide' {
  from {
      left: 0;
      top: 0;
  }
  50% {
      left: 244px;
      top: 100px;
  }
  to {
      left: 488px;
      top: 0;
  }
}
.stage {
  background: #ccc;
  border-radius: 6px;
  height: 150px;
  position: relative;
  min-width: 550px;
}
.stage .ball {
  animation-name: slide;
  animation-duration:2s;
  animation-timing-function: ease-in-out;
  animation-delay: 1.5s;//延迟1.5秒
  animation-iteration-count: infinite;
  animation-direction: alternate;//反向运行动画，每周期结束动画由尾到头运行。
}
.ball {
  background: red;
  border-radius: 50%;
  height: 40px;
  position: absolute;
  width: 40px;
}

执行结果

相关页面

• animation-timing-function
• animation-iteration-count
• animation-direction