Start/apply CSS classes at different "random" times

I have a class applied to 100+ divs.

Let's call the class .random-opacity and it creates an animation of opacity from 0 to 1.

I'd like to apply, or start the animation of this class at random times, so that all the 100+ divs have the same animation, but all starting from different moments.

Is it possible to do such thing with CSS only? It can be totally randomized, as well as giving a delay of maximum X seconds.

Here's the code I have so far:

@keyframes flickerAnimation {

0% { opacity:1; }

50% { opacity:0.6; }

100% { opacity:1; }

}

@-o-keyframes flickerAnimation{

0% { opacity:1; }

50% { opacity:0.6; }

100% { opacity:1; }

}

@-moz-keyframes flickerAnimation{

0% { opacity:1; }

50% { opacity:0.6; }

100% { opacity:1; }

}

@-webkit-keyframes flickerAnimation{

0% { opacity:1; }

50% { opacity:0.6; }

100% { opacity:1; }

}



.random-opacity {

-webkit-animation: flickerAnimation 5s infinite;

-moz-animation: flickerAnimation 5s infinite;

-o-animation: flickerAnimation 5s infinite;

animation: flickerAnimation 5s infinite;

}

Thanks :)