为每个带有类"bounce"的 div 添加自定义动画延迟 ？

Question

如何为每个div添加自定义动画延迟与类"bounce"?基本上，类bounce包含了动画css关键帧(animation .css)。现在，我有20个跳水，叫做"360球员弹跳"。但它们同时反弹。

的例子:

<div class="360player bounce">
    <a href="audio/The_Song.mp3">
        The Song
    </a>
</div>

我想知道我怎么能做到这一点。我搜索了整个stackoverflow和谷歌，但到目前为止还没有找到

Answer 1

我已经为流星创建了一个类似的动画。我相信你将不得不创建具有不同延迟的不同动画集。这取决于你想要实现的目标，在我的例子中，我创建了5,6个不同的动画链，并稍微延迟了它们，所以看起来它们都在不同的时间移动。在下面的示例

@keyframes fallingstars {
    0% {
    opacity: 1;
    transform: translate(0, 0px) rotateZ(0deg);
    }
    25% {
    opacity: 1;
    transform: translate(0px, 0px) rotateZ(deg);
    }
    100% {
    opacity: 0;
    transform: translate(-870px, 500px) rotateZ(310deg);
    }
}
@keyframes fallingstars2 {
    0% {
    opacity: 1;
    transform: translate(0, 0px) rotateZ(25deg);
    }
    25% {
    opacity: 1;
    transform: translate(0px, 0px) rotateZ(deg);
    }
    100% {
    opacity: 0;
    transform: translate(-570px, 600px) rotateZ(210deg);
    }
}

#fallstar {
    animation: fallingstars 12s infinite;
    animation-delay:5s;
    z-index:-1;
}
#fallstar2 {
    animation: fallingstars2 12s infinite;
    z-index:-1;
}

    <img src="stars-ALL.svg" id="fallstar" alt="Stars"  style="width:50px; height:50px; top:0px; right:-50px; position:absolute;" />

你也可以使用jquery/js修改动画来改变延迟。这只是实现这一目标的几种方法之一。循环遍历所有div，并为每个div修改动画延迟。我觉得这可能很贵。

Answer 2

我不知道你使用的CSS库是否包含它，所以这里是你要寻找的特定CSS属性:

http://www.w3schools.com/cssref/css3_pr_animation-delay.asp

你可以在现有的CSS动画上应用这个属性，也许可以在你的页面自己的CSS文件中定义你自己的单独的类，并添加它。

CSS:

.wait300ms {
  animation-delay: 300ms;
  /*TODO: Add cross-browser attributes */
}

HTML:

<div class="360player bounce wait300ms">