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

Question

假设我有一个 ul 包含一些 li 元素。假设我有这样的动画:

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

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

动画应该(为了这个例子假装动画正常工作)改变每个 li 元素的文本颜色。

有没有一种方法可以将此动画按顺序应用到每个 li 元素，中间有 N 毫秒的延迟？我的意思是，有没有办法将该动画应用到第一个 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;
}

...

又名，硬编码值，不是我要求的，我会否决这样的答案。

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 中设置其余的动画设置