Uneven CSS transform animation - html

Question

I'm trying to create the popular "falling snow/object" imagery for a splash page I'm working on. I've got the images and they fall gently, but I'm unable to get an even, "random" spread to the falling. They fall in obvious "clumps". I know it's due to the math used to create them. I've got a math learning disability that makes figuring this out on my own impossible. Can someone look over my code and help me get a less uniform, less clumpy fall of flower petals? Something that looks more natural like a cherry tree being blown and a bunch of petals break loose and float across the splash page.
.petals {
text-align: center;
}
.petals span {
display: inline-block;
width: 19px;
height: 19px;
margin: -219px 40px 54px -34px;
background: #ff0000;
background: url("http://www.cafenocturne.com/testpage/images/MiniPetal.png");
-webkit-animation: petals 15s infinite linear;
-moz-animation: petals 15s infinite linear;
-o-animation: petals 15s infinite linear;
animation: petals 15s infinite linear;
}
.petals span:nth-of-type(5n) {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.petals span:nth-of-type(5n+1) {
-webkit-animation-delay: 1.3s;
-moz-animation-delay: 1.3s;
-o-animation-delay: 1.3s;
animation-delay: 1.3s;
}
.petals span:nth-of-type(5n+2) {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
}
.petals span:nth-child(3n) {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
-o-animation-delay: 1.6s;
animation-delay: 1.6s;
}
.petals span:nth-child(3n+1) {
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
-o-animation-delay: 1.7s;
animation-delay: 1.7s;
}
.petals span:nth-child(3n+2) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
.petals span:nth-child(7n) {
-webkit-animation-delay: 2.5s;
-moz-animation-delay: 2.5s;
-o-animation-delay: 2.5s;
animation-delay: 2.5s;
}
.petals span:nth-child(7n+1) {
-webkit-animation-delay: 3.2s;
-moz-animation-delay: 3.2s;
-o-animation-delay: 3.2s;
animation-delay: 3.2s;
}
.petals span:nth-child(7n+2) {
-webkit-animation-delay: 3.9s;
-moz-animation-delay: 3.9s;
-o-animation-delay: 3.9s;
animation-delay: 3.9s;
}
.petals span:nth-of-type(5n) {
-webkit-animation-delay: 4.3s;
-moz-animation-delay: 4.3s;
-o-animation-delay: 4.3s;
animation-delay: 4.3s;
}
.petals span:nth-of-type(5n+1) {
-webkit-animation-delay: 4.7s;
-moz-animation-delay: 4.7s;
-o-animation-delay: 4.7s;
animation-delay: 4.7s;
}
.petals span:nth-of-type(5n+2) {
-webkit-animation-delay: 5.3s;
-moz-animation-delay: 5.3s;
-o-animation-delay: 5.3s;
animation-delay: 5.3s;
}
.petals span:nth-child(3n) {
-webkit-animation-delay: 5.5s;
-moz-animation-delay: 5.5s;
-o-animation-delay: 5.5s;
animation-delay: 5.5s;
}
.petals span:nth-child(3n+1) {
-webkit-animation-delay: 6.2s;
-moz-animation-delay: 6.2s;
-o-animation-delay: 6.2s;
animation-delay: 6.2s;
}
.petals span:nth-child(3n+2) {
-webkit-animation-delay: 6.8s;
-moz-animation-delay: 6.8s;
-o-animation-delay: 6.8s;
animation-delay: 6.8s;
}
.petals span:nth-child(7n) {
-webkit-animation-delay: 7.1s;
-moz-animation-delay: 7.1s;
-o-animation-delay: 7.1s;
animation-delay: 7.1s;
}
.petals span:nth-child(7n+1) {
-webkit-animation-delay: 7.7s;
-moz-animation-delay: 7.7s;
-o-animation-delay: 7.7s;
animation-delay: 7.7s;
}
.petals span:nth-child(7n+2) {
-webkit-animation-delay: 8.1s;
-moz-animation-delay: 8.1s;
-o-animation-delay: 8.1s;
animation-delay: 8.1s;
}
.petals span:nth-child(9n) {
-webkit-animation-delay: 8.6s;
-moz-animation-delay: 8.6s;
-o-animation-delay: 8.6s;
animation-delay: 8.6s;
}
.petals span:nth-child(9n+1) {
-webkit-animation-delay: 9.2s;
-moz-animation-delay: 9.2s;
-o-animation-delay: 9.2s;
animation-delay: 9.2s;
}
.petals span:nth-child(9n+2) {
-webkit-animation-delay: 9.8s;
-moz-animation-delay: 9.8s;
-o-animation-delay: 9.8s;
animation-delay: 9.8s;
}
.petals span:nth-child(11n) {
-webkit-animation-delay: 10.3s;
-moz-animation-delay: 10.3s;
-o-animation-delay: 10.3s;
animation-delay: 10.3s;
}
.petals span:nth-child(11n+1) {
-webkit-animation-delay: 10.7s;
-moz-animation-delay: 10.7s;
-o-animation-delay: 10.7s;
animation-delay: 10.7s;
}
.petals span:nth-child(11n+2) {
-webkit-animation-delay: 11.1s;
-moz-animation-delay: 11.1s;
-o-animation-delay: 11.1s;
animation-delay: 11.1s;
}
#-webkit-keyframes petals {
0% {
width: 19px;
height: 19px;
opacity: 1;
-webkit-transform: translate(0, 0px) rotateZ(0deg) rotateY(0deg);
}
75% {
width: 19px;
height: 19px;
opacity: 1;
-webkit-transform: translate(200px, 800px) rotateZ(270deg) rotateY(270deg);
}
100% {
width: 19px;
height: 19px;
opacity: 0;
-webkit-transform: translate(350px, 1000px) rotateZ(360deg) rotateY(360deg);
}
}
#-moz-keyframes petals {
0% {
width: 19px;
height: 19px;
opacity: 1;
-webkit-transform: translate(0, 0px) rotateZ(0deg) rotateY(0deg);
}
75% {
width: 19px;
height: 19px;
opacity: 1;
-webkit-transform: translate(200px, 800px) rotateZ(270deg) rotateY(270deg);
}
100% {
width: 19px;
height: 19px;
opacity: 0;
-webkit-transform: translate(350px, 1000px) rotateZ(360deg) rotateY(360deg);
}
}
<div class="petals">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
,

Answer 1

The easiest way to do this is to just generate the animation-delay randomly for each petal using js (example using jquery, sorry for bad formatting):
function getRandomInt(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
$(".petals span").each(function() {
var delay = getRandomInt(1, 100) / 10
$(this).css("animation-delay", delay + "s");
});
Demo