Question

我们说我的<?PHP $dateCreated = mysql_result(mysql_query("SQL to stored date and time"),0); $dateNow = new DateTime(); $dateOther = new DateTime($dateCreated); $interval = $dateNow->diff($dateOther); echo $interval->format('%R%a days');包含一些ul元素。我们也说我有这样的动画：

li

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

假设动画（为了这个例子假装动画正常工作）来改变每个@keyframes fcolor { from { color: #123; } to { color: #456; } }元素的文本颜色。

有没有办法可以将这个动画顺序地应用到每个li元素，其间延迟为li毫秒？我的意思是，有没有办法将该动画应用到第一个N，然后等待li，然后将动画应用到第二个30ms，等待另一个li }，适用于第三个等等......

所有没有知道30ms元素的数量。另外，仅限CSS。我知道这可以通过javascript轻松完成。

我会重复，以防万一。我不知道li元素的数量，所以像

这样的解决方案

li

又名硬编码值，并不是我要求的，我会贬低这些答案。

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

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

1 个答案: