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 一个一个地改变颜色？

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

注意 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');
});