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

Question

假设我有一个包含几个li元素的ul。我们还可以说，我有一个这样的动画：

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

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

假设动画（为了本例的目的，假设动画工作正常）更改每个li元素的文本颜色。

有没有一种方法可以将这个动画依次应用于每个li元素，其间有N毫秒的延迟？我的意思是，有没有一种方法可以将该动画应用于第一个li，然后等待，比如30ms，然后将动画应用于第二个li，等待另一个30ms，应用于第三个，等等…

所有这些而不知道CCD_ 10元素的数量。此外，仅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;
}
...

也就是硬编码的价值观，不是我想要的，我会否决这样的答案。

Answer 1

不，你不能只使用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 中设置其余的动画设置