是否可以逐步为儿童运行CSS3动画（一个接一个）？

Question

使用html（EXAMPLE）

的简单CSS3动画

<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;
}

所有颜色的变化同时适用于所有儿童。是否可以逐个改变每个孩子的颜色？

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

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

Answer 1

CSS不可能实现这一点。 （虽然将来CSS-Variables可用。今天它们只是实验性的）

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

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

Answer 2

http://jsfiddle.net/AE7tj/这是动画延迟的变体。

正如@mddw所说，这是可能的，但已知数量的孩子。动画应该应用于每个孩子，因为每个人都需要自己的动画延迟。

此外，如果您希望动画无限运行，您实际上需要动画持续时间来覆盖整个时间。动画延迟仅适用于第一轮动画，不适用于迭代之间。

我有：

0% {color:blue}
33% {color:red}
66% {color: black}
100% {color: black}

动画持续时间是9秒。这意味着从开始到大约。第3秒颜色将从蓝色变为红色，然后从第3到第6颜色将从红色变为黑色，并保持黑色直到动画结束。