2

在带有 html 的简单 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;
}

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

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

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

4

2 回答 2

1

这对于 CSS 来说是不可能的。（尽管将来可能会提供 CSS 变量。但今天它们只是实验性的）

但是您可以使用 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');
});
于 2013-02-19T07:29:08.200 回答
1

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

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

此外，如果您希望动画无限运行，您实际上需要动画持续时间来覆盖整个时间。Animation-delay 仅适用于动画的第一次运行，不会在迭代之间应用。

我有：

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

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

于 2013-02-21T02:26:20.850 回答