JSFiddle - React, Tailwind, and code Playground

by swarnendu

HTML

<body>
	<div id="id1" class="cc1">
		<canvas width="100" height="100" id="ci1" ></canvas>
	</div>
</body>

CSS

.cc1{
-webkit-animation-name: animation;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;

-moz-animation-name: animation_m;
-moz-animation-duration: 2s;
-moz-animation-timing-function: linear;

}

#id1,#ci1{
	position:absolute;
	top:0px;
	left:0px;
}

@-webkit-keyframes animation {
0% { -webkit-transform:translate(100px,100px) scale(1); }
50% { -webkit-transform:translate(00px,00px)  scale(2); }
100% { -webkit-transform:translate(100px,100px)  scale(1); }
}

@-moz-keyframes animation_m {
0% { -moz-transform:translate(100px,100px)  scale(1); }
50% { -moz-transform: translate(00px,00px) scale(2); }
100% { -moz-transform:translate(100px,100px)  scale(1); }
}

JavaScript

var e=document.getElementById("ci1");
		var ctx=e.getContext("2d");
		ctx.fillStyle="#f00";
		ctx.fillRect(0,0,90,90);