自动为li添加动画延迟答案

【问题标题】：Add animation delay to li automatically自动为li添加动画延迟
【发布时间】：2018-05-22 12:42:46
【问题描述】：

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

有没有办法自动给li标签添加动画延迟？

这是 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;
}

我想更改此代码，为每个标签添加 6s 延迟。

【问题讨论】：

CSS Animations with delay for each child element的可能重复
@IsmailFarooq 该问题的答案无法解决我的问题。
阅读投票最多的答案，如果没有 js，这是不可能的，您可以使用 sass 减少重复次数，但您无法动态处理它
但只有一种方法是内联样式检查我的答案
@IsmailFarooq 感谢您的提示

标签： css animation

【解决方案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>

【讨论】：

【解决方案2】：

您可以使用 PHP 动态地回显样式的每个部分，或者将其直接集成到 css 中。例如

.button:hover {
    border: 10px solid;
    transition: <?php echo $lot ?>;
}

其中 $lot 是动画时间。

我不知道如何在 php 中获取第 nth-child(N)，但无疑有一种方法。对不起，如果这不是很有用，只是想说php是一个很好的方法。

【讨论】：

谢谢，但我应该在没有服务器端编程的情况下这样做。
这是为什么呢？如果您只是将样式表嵌入到页面中，它只会更新一次。
这需要在每次插入新元素时更新内联样式表。