JSFiddle - React, Tailwind, and code Playground

by eprouver

HTML

<div id="test"></div>

CSS

body{
background:#666;
    height:600px;
}

.sparkle{
 background:url(http://i47.tinypic.com/qppkl3.png);
    height:50px;
    width:50px; 
    
     -webkit-animation-name: sparkle;
 -webkit-animation-duration: 2s;
 -webkit-animation-iteration-count: 1;
 -webkit-animation-direction: forwards;
 -webkit-animation-timing-function: ease-out;
 -webkit-animation-fill-mode: forwards;
 opacity:0;
    position:absolute;
}


@-webkit-keyframes sparkle {
    0%   { -webkit-transform: rotate(0deg) scale(0);
opacity:1;            }
50%{ opacity:1;
}
    100% { -webkit-transform: rotate(360deg) scale(1.3);
opacity:0;}
}

JavaScript

for(var i = 0; i < 40; i++){
$('body').append($('<div>').addClass('sparkle').on('webkitAnimationEnd', function(){
    var pass = $(this);   
    
    pass.css({
        '-webkit-animation-name':'none',
        '-webkit-animation-duration':Math.random()*2 + 1 + 's',
        '-webkit-animation-delay':(Math.random()*3) + 's',
        'background-position': (Math.round(Math.random() * 2) * 50) + 'px 0px',
        'top': Math.random()* parseInt(pass.parent().css('height') + 'px'),
        'left': Math.random()* parseInt(pass.parent().css('width') +'px')
    });
    

    setTimeout(function(){
        
    pass.css({
        '-webkit-animation-name':'sparkle'});
    },5);
    
    
}).css({
'top': Math.random()* 400 + 'px',
'left': Math.random()* 400 +'px',
    '-webkit-animation-delay':(Math.random()*3) + 's',
    'background-position': (Math.round(Math.random() * 2) * 50) + 'px'
}));
    
    }