css - 是否可以为 child 一步一步(一步步)运行 CSS3 动画？

Question

在带有 html 的简单 CSS3 动画中 ( EXAMPLE )

<div class="parent">
    <a href="#">First</a>
    <a href="#">Second</a>
    <a href="#">Third</a>
</div>

和CSS

@-webkit-keyframes anim{
    0% {color:blue}
    10% {color:red}
}
.parent a {
    color:black;
    -webkit-animation: anim 3s infinite;
}

所有颜色变化同时适用于所有子项。是否可以为每个 child 一一改变颜色？

换句话说，我们需要暂停其他子项并为单个子项运行动画，然后暂停并运行下一个子项。这意味着一次只有一个 child 正在制作动画。

请注意，子级的数量未知，我们需要为单个子级而不是整个周期分配动画持续时间。

Answer 1

这对于 CSS 来说是不可能的。 (尽管将来 CSS 变量可能会可用。但今天它们还只是实验性的)

但是你可以用 LESS 或 SASS 创建一些东西(不是很漂亮)(下面的例子)。 注意:只有当您知道 a 的最大数量时，您才能执行此操作。

@for $i from 1 through 19 {
    .parent a:nth-child(#{$i}) { -webkit-animation-duration: $1s; }
}

建议的解决方案: 如果您不想这样做，请使用 Javascript。 很简单:

$.each($('.parent a'), function(index, elem) {
    $(elem).css('-webkit-animation-duration', index + 's');
});