JSFiddle - React, Tailwind, and code Playground

by zono

HTML

<div id="chalambaHolder">
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
}

#chalambaHolder {
   width: 90%;
   height: 90%;
   margin: 0px auto;
   border: 1px solid black;
}
.chalambaElement {
        animation: magAnimation 5s infinite;
                -webkit-animation: magAnimation 5s infinite;
}

           @keyframes magAnimation
            {
            0%   {


            }
            25%  {
                
                transform: rotate(90deg);
            }
            50%  {
           
                transform: rotate(180deg);
            }
            75%  {
                 
                transform: rotate(270deg);
            }
            100% {
               
                transform: rotate(360deg);
            }
            }
            @-webkit-keyframes magAnimation
            {
            0%   {
              

            }
            25%  {
           
                -webkit-transform: rotate(90deg);
            }
            50%  {
              
                -webkit-transform: rotate(180deg);
            }
            75%  {
         
                -webkit-transform: rotate(270deg);
            }
            100% {
             
                -webkit-transform: rotate(360deg);
            }
            }

JavaScript

setTimeout(function (){
var randomFromInterval = function (from,to)
{
    return Math.floor(Math.random()*(to-from+1)+from);
}

var holder = document.getElementById("chalambaHolder");
var holderCoord = holder.getBoundingClientRect();
var _span = document.createElement("div");
       // _span.setAttribute("type", "image/svg");
    _span.style.position = "absolute";
    _span.setAttribute("class", "chalambaElement");
    holder.appendChild(_span);
        _span.setAttribute("style", "background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Queen_of_diamonds_en.svg/209px-Queen_of_diamonds_en.svg.png);width: 209px; height: 303px;");
    _span.style.left = randomFromInterval(holderCoord.left, holderCoord.right-_span) + "px";
    _span.style.top = randomFromInterval(holderCoord.top, holderCoord.bottom) + "px";
 setTimeout(arguments.callee, 1000);
}, 1000);