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

Question

我在 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

我认为这是一个打字错误，您在第 7 行将其设置为 111 秒...

-webkit-animation-delay: 111s;

应该是——

-webkit-animation-delay: 11s;