JSFiddle - React, Tailwind, and code Playground

HTML

<button id="myBtn">Click Me</button>
<div id="animateBox" class="box"><div>

CSS

.box {
    width: 200px;
    height: 200px;
    background-color:red;
    visibility: hidden;
    border-radius: 200px;
}

.fadeIn{
	animation-name: fadeIn;
	-webkit-animation-name: fadeIn;	

	animation-duration: 0.25s;	
	-webkit-animation-duration: 0.25s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;

	visibility: visible !important;	
}

@keyframes fadeIn {
	0% {
		transform: scale(0);
		opacity: 0.0;		
	}
	/* 60% {
		transform: scale(0.4);	
	}
	80% {
		transform: scale(0.8);
		opacity: 1;	
	}	 */
	100% {
		transform: scale(1);
		opacity: 1;	
	}		
}

@-webkit-keyframes fadeIn {
	0% {
		-webkit-transform: scale(0);
		opacity: 0.0;		
	}
	/* 60% {
		-webkit-transform: scale(0.4);
	}
	80% {
		-webkit-transform: scale(0.8);
		opacity: 1;	
	} */	
	100% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}		
}

.fadeOut{
	animation-name: fadeOut;
	-webkit-animation-name: fadeOut;	

	animation-duration: 0.25s;	
	-webkit-animation-duration: 0.25s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;
    
	visibility: hidden;
}

@keyframes fadeOut {
	0% {
		transform: scale(1);
		opacity: 1;		
	}
	100% {
		transform: scale(0);
		opacity: 0;	
	}		
}

@-webkit-keyframes fadeOut {
	0% {
		-webkit-transform: scale(1);
		opacity: 1;		
    }
	100% {
		-webkit-transform: scale(0);
		opacity: 0;
	}		
}

JavaScript

$('#myBtn').click(function() {
    $('#animateBox').addClass("fadeIn");
});

$('#animateBox').click(function() {
    $( this ).addClass( "fadeOut" );
    $( this ).removeClass( "fadeIn" );  
});