如何在CSS上延迟动画？我试过动画延迟。不起作用

Question

我在CSS中创建了非常好的幻灯片，但我希望它们在另一个CSS中显示。例如，我在下面有这个动画，无论我使用动画播放参数的越高，它根本无法使用。我需要它作为第二张幻灯片。它必须在第一个后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

我认为这是错别字，您将其设置为111秒...

-webkit-animation-delay: 111s;

应该是 -

-webkit-animation-delay: 11s;

Answer 2

您用

覆盖代码

animation: fadein 3s ease-in-out;

您也应该将延迟放在此部分中，因此：

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