SOURCE

$(document).ready(function(){
	animate();
  $(".play").click(animate).mouseover(function(){
  	$(".play").css({"background-color":"#A55"});
  }).mouseout(function(){
  	$(".play").css({"background-color":"#060"});
  });
});
function animate(){
	  $('div>div>div').each(function(id){
    $(this).css({
      position: 'relative',
      top: '-200px',
      opacity: 0
    });
      console.log(123);
    var wait = Math.floor((Math.random()*3000)+1);
    $(this).delay(wait).animate({
      top: '0px',
      opacity: 1
    },1000);
  });
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<div class='content'>
    <div style='padding-right:40px'>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div style='padding-right:20px'>
      <div></div>
      <div></div>
      <div style='margin-right:122px'>
      </div>
    </div>
    <div>
      <div></div>
      <div></div>
      <div style='margin-right:142px'></div>
    </div>
    <div>
      <div></div>
      <div style='margin-right:82px' class="play"></div>
      <div  class="play"></div>
      <div style='margin-right:42px'></div>
    </div>
    <div>
      <div></div>
      <div style='margin-right:62px' class="play"></div>
      <div class="play"></div>
      <div class="play"></div>
      <div style='margin-right:42px'></div>
    </div>
    <div>
      <div></div>
      <div style='margin-right:42px' class="play"></div>
      <div class="play"></div>
      <div class="play"></div>
      <div class="play"></div>
      <div style='margin-right:42px'></div>
    </div>
    <div>
      <div></div>
      <div style='margin-right:62px' class="play"></div>
      <div class="play"></div>
      <div class="play"></div>
      <div style='margin-right:42px'></div>
    </div>
    <div>
      <div></div>
      <div style='margin-right:82px' class="play"></div>
      <div class="play"></div>
      <div style='margin-right:42px'></div>
    </div>
    <div>
      <div style='margin-right:22px'></div>
      <div style='margin-right:142px'></div>
    </div>
    <div>
      <div style='margin-right:42px'></div>
      <div></div>
      <div style='margin-right:102px'></div>
    </div>
    <div>
      <div style='margin-right:62px'></div>
      <div></div>
      <div style='margin-right:82px'></div>
    </div>
    <div>
      <div style='margin-right:42px'></div>
      <div></div>
      <div style='margin-right:102px'></div>
    </div>
    <div>
      <div style='margin-right:22px'></div>
      <div></div>
      <div style='margin-right:122px'></div>
    </div>    
    <div>
      <div></div>
      <div></div>
      <div style='margin-right:142px'></div>
    </div>      
    <div>
      <div></div>
      <div style='margin-right:162px'></div>
    </div>
  </div>

body{
	margin:50px;
  background-color:#2C3437;
}
.content{
  display:inline-block;
  width:350px;
  height:239px;
  margin-right:-4px;
}
.play{
	cursor:pointer;
	background-color:#060;
}
div>div{
  display:block;
  height:20px;
}
div>div>div{
  width:16px;
  height:16px;
  background-color:#FFF;
  display:inline-block;
  float:right;
  margin:2px;
}