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;
        -webkit-animation-fill-mode:forwards;
        /*Chrome 16+, Safari 4+*/
        -moz-animation-fill-mode:forwards;
        /*FF 5+*/
        -o-animation-fill-mode:forwards;
        /*Not implemented yet*/
        -ms-animation-fill-mode:forwards;
        /*IE 10+*/
        animation-fill-mode:forwards;
        /*when the spec is finished*/
        visibility:visible;
    }
    @keyframes fadeOut {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(0.5);
        }
    }
   ...

JavaScript

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

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