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

Question

I've created really good slides in CSS but I want them to show after another. For example, I've got this animation below and no matter how higher I use animation-delay parameter, it simply won't work. I need this to work as a second slide. It must appear 30s after the first one.

  .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

I think it's a typo, you set it to 111 seconds on line 7...

-webkit-animation-delay: 111s;

It should be -

-webkit-animation-delay: 11s;

Answer 2

you override your code with

animation: fadein 3s ease-in-out;

you should put delay in this part too, like this:

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