JSFiddle - React, Tailwind, and code Playground
HTML
<div></div>
<div style="left:20%;"></div>
<div style="left:35%;"></div>
<div style="left:50%;"></div>
CSS
div {
width:50px;
height:50px;
top:0px;
position:absolute;
opacity:0;
margin-right:55px;
background:url("http://a1.twimg.com/profile_images/289439692/0511-0812-1620-2229_Black_and_White_Snowflake_clipart_image_normal.jpg") no-repeat;
}
JavaScript
$("div").each(function(i, el) {
$(el).bind('snowfall', function() { // bind a custom event
$(this).animate({top: 150, opacity: 1}, 3000, function() {
$(this).css({top: 0, opacity: 0}).delay((i + 1) * 1000).trigger('snowfall')}) // recurse
}).delay((i + 1) * 1000)}); // initial fire