JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fdiv">
	
</div>

CSS

#fdiv{
		width: 10px;
		height: 10px;
		position: absolute;
		margin-left: -5px;
		margin-top: -5px;
		left: 50%;
		top: 50%;
		background-color: red;
	}
	
	.go{
		-webkit-animation: spinAndZoom 1s 1;
	}
	
	@-webkit-keyframes spinAndZoom {
		0% {
			width: 10px; 
			height: 10px; 
			margin-left: -5px;
			margin-top: -5px;
			-webkit-transform: rotateZ(0deg);
		}
		100% {
			width: 400px;
			height: 400px;
			margin-left: -200px;
			margin-top: -200px;
			-webkit-transform: rotateZ(360deg);
		}
	}

JavaScript

$(function(){
		$("#fdiv").delay(1000).addClass("go");
	});