如何在CSS上延遲動畫？ 我嘗試了動畫延遲。 不起作用

Question

我已經在CSS中創建了非常不錯的幻燈片，但我希望它們能陸續顯示。 例如，下面有這個動畫，無論我使用animation-delay參數多高，它都根本不起作用。 我需要將此作為第二張幻燈片。 它必須在第一個出現30秒后出現。

  .slideInLeft2 {  /* do slide 2*/
  -webkit-animation-name: slideInLeft2;
  animation-name: slideInLeft2;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-delay: 111s;
  -moz-animation: fadein 3s ease-in; /* Firefox */
  -webkit-animation: fadein 3s ease-in; /* Safari and Chrome */
  -o-animation: fadein 3s ease-in; /* Opera */
  animation: fadein 3s ease-in-out;
    }
  animation-delay: 11s;
  animation-fill-mode: both;
  }
  @-webkit-keyframes slideInLeft2 {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  }
  @keyframes slideInLeft2 {
  0% {
  -webkit-transform: translateX(-400%);
  transform: translateX(-400%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateX(0);
  }
  {
  transform: translateX(0);
}
  } 

Answer 1

我認為這是一個錯字，您在第7行將其設置為111秒...

-webkit-animation-delay: 111s;

它應該是 -

-webkit-animation-delay: 11s;

Answer 2

您可以使用覆蓋代碼

animation: fadein 3s ease-in-out;

您也應該在這部分延遲，例如：

animation: fadein 3s ease-in-out 111s;