JSFiddle - React, Tailwind, and code Playground
HTML
<div id="gifContainer">
<img id="gif" src="http://www.reactiongifs.com/r/2011/09/mind_blown.gif" />
</div>
CSS
#gifContainer {
position: relative;
display: inline-block;
}
.star {
position: absolute;
top: 0;
left: 0;
transition: transform 3s;
}
JavaScript
var w = $('#gifContainer').width() - 12;
var h = $('#gifContainer').height() - 12;
var stars = [];
function randomlyPositionStar( star ) {
var x = (Math.random() * w);
var y = (Math.random() * h);
star.style.transform = 'translate('+x+'px,'+y+'px)';
}
setInterval( function() {
var i = Math.floor(Math.random() * stars.length);
randomlyPositionStar( stars[i] );
}, 100);