不能在CSS動畫上使用延遲

Question

我正在嘗試使用一些漂亮的html創建幻燈片。 我設法創建了大約4張幻燈片。 但是第四張幻燈片超過了第三張幻燈片。 我已經調整了延遲時間，以便稍后顯示，但是它不起作用。 我正在使用速記屬性，但是我已經嘗試了不使用速記，並且它也無法正常工作。 我的代碼如下：

/*slide 4 */
    #slideInLeft4 {  /* do slide 4. Para criar de um terceiro, só copiar e colar, trocar os nomes para o número correspondente e alterar o delay*/
 -webkit-animation: slideInLeft4 20s 59s 1 normal both;  /* duração, atraso, repetição, direção, modo de preenchimento Safari 4+ */
  -moz-animation:    slideInLeft4 20s 59s 1 normal both;  /* duração, atraso, repetição, direção, modo de preenchimento Fx 5+ */
  -o-animation:      slideInLeft4 20s 59s 1 normal both;  /* duração, atraso, repetição, direção, modo de preenchimento Opera 12+ */
  animation:         slideInLeft4 20s 59s 1 normal both;  /* duração, atraso, repetição, direção, modo de preenchimento IE 10+, Fx 29+ */
  }
  @keyframes slideInLeft4 {   /* a porcentagem representa a animation-duration. Exemplo: animation-duration: 10s, então 20% é 2s */
  0% {
  transform: translateX(-100%);
  transform: translateY(-100%);
  opacity: 1;
  }
  10% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  }
  80% {
  opacity: 1;
  }
  90% {
  opacity: 1;
  }
  95% { /* tempo que começa a desaparecer o slide */
  opacity: 0.5;
  }
  100% {
  opacity: 0;
  }
  } 

我的小提琴： https : //jsfiddle.net/gabrielluz/kh2mp3b1/

Answer 1

正確的速記參數：

• 動畫名稱（slideInLeft4）
• 持續時間（20秒）
• 計時功能（嘗試線性或查看可用的功能 ）
• 延誤 （59秒）
• 迭代次數（1）
• 方向（正常）
• 填充模式（兩者）
• 播放狀態（與JS一起播放/停止播放時很有用）。

就您而言，應該是：

animation: slideInLeft4 20s linear 59s 1 normal both;

資料來源： w3Schools