如何在CSS上延迟动画？我试过动画延迟。不行

Question

我在CSS中创建了非常好的幻灯片，但我希望它们能够在另一个之后展示。例如，我在下面有这个动画，无论我使用动画延迟参数有多高，它都无法正常工作。我需要这个作为第二张幻灯片。它必须在第一个之后30s出现。

  .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);
}
  }