自动为li添加动画延迟

Posted 2023-03-06

【中文标题】自动为li添加动画延迟

【英文标题】：Add animation delay to li automatically

【发布时间】：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 感谢您的提示

【参考方案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是一个很好的方法。

【讨论】：

谢谢，但我应该在没有服务器端编程的情况下这样做。

这是为什么呢？如果您只是将样式表嵌入到页面中，它只会更新一次。

这需要在每次插入新元素时更新内联样式表。