JSFiddle - React, Tailwind, and code Playground

by swarnendu

HTML

<body>
    <div id="di1" class="dc1">    
        <div id="di2" class="dc2">    
          <div id="di3" class="dc3">    
                <canvas id="ci1" class="cc1" width="70" height="70"></canvas>
            </div>
        </div>
    </div>
</body>

CSS

#di1,#ci1,#di2,#di3{position: absolute;left:50px;top:50px;-webkit-transform-origin: 70px 70px;}

            .dc1{
                -webkit-animation-timing-function: linear;
                -webkit-animation-duration: 2.0s;                 
                -webkit-animation-delay: 1.0s;
                -webkit-animation-name: t_anim1;
                -webkit-animation-fill-mode:  forwards;
            }

            @-webkit-keyframes t_anim1
            {
                0% {-webkit-transform: rotate(10deg)   }
                30% {-webkit-transform:  rotate(20deg)   }
                70% {-webkit-transform:  rotate(30deg)   }
                100% {-webkit-transform:  rotate(40deg) }
            }

            .dc2{
                -webkit-animation-timing-function: linear;
                -webkit-animation-duration: 2.0s;                 
                -webkit-animation-delay: 5.0s;
                -webkit-animation-name: t_anim2;
                -webkit-animation-fill-mode:  forwards;
            }

            @-webkit-keyframes t_anim2
            {
                0% {-webkit-transform: rotate(-10deg)   }
                30% {-webkit-transform:  rotate(-20deg)   }
                70% {-webkit-transform:  rotate(-30deg)   }
                100% {-webkit-transform:  rotate(-40deg) }
            }

            .dc3{
                -webkit-animation-timing-function: linear;
                -webkit-animation-duration: 2.0s;                 
                -webkit-animation-delay: 2.0s;
                -webkit-animation-name: t_anim3;
                -webkit-animation-fill-mode:  forwards;
            }

            @-webkit-keyframes t_anim3
            {
                0% {-webkit-transform: scale(1)   }
                30% {-webkit-transform:  scale(2)   }
                70% {-webkit-transform:  scale(2)   }
                100% {-webkit-transform:  scale(1) }
            }

JavaScript

window.addEventListener("load",draw_canvas,false) ;
function draw_canvas()
{
var c1=document.getElementById("ci1");var ctx1=c1.getContext("2d");
ctx1.fillStyle="#ff0000";
ctx1.strokeStyle="#000000";

ctx1.beginPath();ctx1.arc(35,35,35,0,Math.PI*2,true);ctx1.closePath();ctx1.fill();
ctx1.stroke();

var element1=document.getElementById("di1");
element1.addEventListener("webkitAnimationStart",start_ev1,false);
var element2=document.getElementById("di2");
element2.addEventListener("webkitAnimationStart",start_ev2,false);
var element3=document.getElementById("di3");
element3.addEventListener("webkitAnimationStart",start_ev3,false);


}

function start_ev1()
{
    console.log("At start event on di1 div ; time="+Date.now());
}
function start_ev2()
{
    console.log("At start event on di2 div ; time="+Date.now());
}
function start_ev3()
{
    console.log("At start event on di3 div ; time="+Date.now());
}