A CodePen by maciekmp. CSS Heart with js animation - CSS Heart with js animation

index.html

<div class='left'>
  <div style='padding-right:68px'>
    <div></div>
    <div></div>
  </div>
  <div style='padding-right:34px'>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
</div>
<div class='right'>
  <div style='padding-left:34px'>
    <div></div>
    <div></div>
  </div>
  <div style=''>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
    <div></div>
  </div>
  <div>
    <div></div>
  </div>
</div>

script.js

$(document).ready(function(){
  $('div>div>div').each(function(id){
    $(this).css({
      position: 'relative',
      top: '-200px',
      opacity: 0
    });
    var wait = Math.floor((Math.random()*3000)+1);
    $(this).delay(wait).animate({
      top: '0px',
      opacity: 1
    },1000);
  })
});

style.css

body{
  margin:80px
}
.left,.right{
  display:inline-block
}
.left{
  width:170px;
  height:239px;
  margin-right:-4px
}

div>div{
  display:block;
  height:34px;
}
div>div>div{
  width:30px;
  height:30px;
  background-color:red;
  display:inline-block;
  float:right;
  margin:2px;
}
div.right>div>div{
  float:left;
}