Add custom animation delay for every div with the class "bounce"?

Question

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.

Answer 1

I have created a similar animation for falling stars. I believe you are going to have to create distinct animation sets each with different delays. It Depends on what you are trying to achieve in my instance I created 5, 6 different animation chains and delayed them each slightly so it appears they are all moving at different times. Example below

@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;" />

You could also modify the animation using jquery / js to change the delay. This is just one of several ways to accomplish this. Loop through all your divs, and for each div modify the animation delay. I feel this might be expensive.

Answer 2

I don't know if the CSS library you're using includes it, so here's the specific CSS property you're looking for:

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

You can apply this attribute on top of an existing CSS animation, perhaps by defining your own seperate class in your page's own CSS file and adding that.

CSS:

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

HTML:

<div class="360player bounce wait300ms">