bees!

by eprouver

HTML

<div class="swarm">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    
</div>

CSS

.test{
 position:absolute;   
 top:200px;
 left:200px;
 -webkit-transition:all 1.5s ease; 

height:4px;
width:4px;
background:black;
border-radius: 100px; 
}

JavaScript

function changefly(bee){
    var rot = [~~(Math.random() * 150)-75]/2;
        var rot2 = [~~(Math.random() * 150)-75]/2;
    var a = ~~(Math.random() * 150)-75;
    var b = ~~(Math.random() * 150)-75;
    $(bee).css({
'-webkit-transform':'rotate('+rot+'deg) translate3d('+a+'px, '+b+'px, 0px) rotate('+rot2+'deg)'       
}); 

    
setTimeout(function(){ changefly(bee);  }, ~~(Math.random()*800) + 200);   


}
    
    $.each($('.test'), function(i,v){
    changefly(v);
    });