animation-delay屬性用來定義動畫開始播放的時間，用來觸發動畫播放的時間點。和transition-delay屬性一樣，用於定義在瀏覽器開始執行動畫之前等待的時間。

語法規則：

animation-delay:<time>[,<time>]*

案例演示：    

瀏覽器渲染樣式之後2S之後觸發move動畫。

HTML:

<div><span></span></div>

CSS:

@keyframes move {
  0%{
    transform: translate(0);
  }
  15%{
    transform: translate(100px,180px);
  }
  30%{
    transform: translate(150px,0);
  }
  45%{
    transform: translate(250px,180px);
  }
  60%{
    transform:translate(300px,0);
  }
  75%{
    transform: translate(450px,180px);
  }
  100%{
    transfrom: translate(480px,0);
  }
}
div {
  width: 500px;
  height: 200px;
  border: 1px solid red;
  margin: 20px auto;
}
div span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: green;
  border-radius: 100%;
  animation-name:move;
  animation-duration: 10s;
  animation-timing-function:ease;
  animation-delay:2s;
 

  animation-iteration-count:infinite;
}

結果展示：