css - 自动为li添加动画延迟

Question

我有一个 CSS3 的幻灯片，每个 child 都有 animation-delay，但这不是动态的，因为我应该为每个标签添加 nth-child ，

有什么办法可以自动给li标签加上animation-delay吗？

这是 CSS 代码:

.cb-slideshow li:nth-child(2) span {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
}

.cb-slideshow li:nth-child(3) span {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
}

.cb-slideshow li:nth-child(4) span {
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -o-animation-delay: 18s;
  -ms-animation-delay: 18s;
  animation-delay: 18s;
}

.cb-slideshow li:nth-child(5) span {
  -webkit-animation-delay: 24s;
  -moz-animation-delay: 24s;
  -o-animation-delay: 24s;
  -ms-animation-delay: 24s;
  animation-delay: 24s;
}

.cb-slideshow li:nth-child(6) span {
  -webkit-animation-delay: 30s;
  -moz-animation-delay: 30s;
  -o-animation-delay: 30s;
  -ms-animation-delay: 30s;
  animation-delay: 30s;
}

我想更改此代码以向每个标签添加 6 秒的延迟。

Answer 1

除了动态添加内联样式或使用javascript之外，没有办法动态处理它

例如

.cb-slideshow li {
  animation: FadeIn 1s linear;
  animation-fill-mode: both;
}

@keyframes FadeIn {
  0% {
    opacity: 0;
    transform: scale(.1);
  }
  85% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

<div class="cb-slideshow">
  <li style="animation-delay: 1s;">test text</li>
  <li style="animation-delay: 2s;">test text</li>
  <li style="animation-delay: 3s;">test text</li>
  <li style="animation-delay: 4s;">test text</li>
  <li style="animation-delay: 5s;">test text</li>
</div>