Html 使用纯CSS设置未知数量元素的动画

假设我有一个

ul

包含一些

li

元素。我们也可以说我有一个这样的动画：

@keyframes fcolor {
    from {
        color: #123;
    }
    to {
        color: #456;
    }
}

忽略实际颜色，这只是一个简单的演示

假设动画（为了本例，假设动画正常工作）更改每个

li

元素的文本颜色

是否有一种方法可以将此动画顺序应用于每个

li

元素，其间延迟

N

ms？我的意思是，有没有办法将动画应用到第一个

li

，然后等待，比如说，

30ms

，然后将动画应用到第二个

li

，等待另一个

30ms

，应用到第三个，等等

所有这些都不知道

li

元素的数量。 而且，仅css。我知道这可以用javascript轻松完成

我重复一遍，以防万一。我不知道

li

元素的数量，所以解决方案如下

ul:nth-child(1) {
    animation: fcolor 100ms ease 0ms;
}

ul:nth-child(2) {
    animation: fcolor 100ms ease 30ms;
}

ul:nth-child(3) {
    animation: fcolor 100ms ease 60ms;
}

...

---

aka，硬编码值，不是我想要的，我将否决这些答案。

不，你不能只使用CSS（至少今天不行）

---

作为一个非javascript解决方案，我可以看到一个可行的解决方案，您可以在服务器端使用ASP或PHP创建如下元素

<ul>
  <li style="animation-delay: 0s;"> ... </li>
  <li style="animation-delay: 10s;"> ... </li>
  <li style="animation-delay: 20s;"> ... </li>
  <li style="animation-delay: 30s;"> ... </li>
  ....
</ul>

....

---

然后在CSS中设置其余的动画设置

不，没有脚本就不能这样做。壁橱CSS只是添加第100个孩子，希望最好：）@LGSon这充其量也就是垃圾。通过javascript添加延迟，循环所有列表？当然：）。。。只是想确保在不知道的情况下确实是在不知道的情况下，在页面加载时使用脚本（运行一次）的解决方案可以吗？