0

How would I add a custom animation delay for every div with the class "bounce"? Basically the class bounce contains the animation css keyframes (animate.css). Now, I have 20 divs called "360player bounce". but they all bounce at the same time.

example: 

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

Just wondering how I could do this. I searched entire stackoverflow and google but no luck so far.

4

2 回答 2

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 修改动画延迟。我觉得这可能很贵。

于 2013-06-12T15:42:50.150 回答
0

我不知道您使用的 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">
于 2013-06-12T15:40:24.490 回答