JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&amp;subset=cyrillic,cyrillic-ext,latin-ext,vietnamese"
        rel="stylesheet">
        
<div id="txt-to-anim" class="txt-style">Animate text</div>  

<div class="btn" id="btn-add-anim">
  Click to Animate
</div>
<br>
<div class="btn" id="btn-remove-anim">
  remove to Animate
</div>

CSS

body {
            font-family: 'Montserrat', sans-serif;
            font-weight: 100;
            font-style: normal;
        }
        
        .txt-style{
          font-size: 120px; width:100%; text-align:center;
        }

.btn{
  width: 150px; background-color: #fff; border: #333 solid 1px; padding:5px; text-align:center; color: #000;
}
        .idl-animted {
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }

        @-webkit-keyframes id-zoomout {
            from {
                opacity: 1;
            }

            50% {
                opacity: 0;
                -webkit-transform: scale3d(2, 2, 2);
                transform: scale3d(2, 2, 2);
            }

            to {
                opacity: 0;
            }
        }

        @keyframes id-zoomout {
            from {
                opacity: 1;
            }

            50% {
                opacity: 0;
                -webkit-transform: scale3d(2, 2, 2);
                transform: scale3d(2, 2, 2);
            }

            to {
                opacity: 0;
            }
        }

        .id-zoomout-anim {
            -webkit-animation-name: id-zoomout;
            animation-name: id-zoomout;
        }

JavaScript

$("#btn-add-anim").click(function(){
    $("#txt-to-anim").addClass("idl-animted id-zoomout-anim");
});

$("#btn-remove-anim").click(function(){
    $("#txt-to-anim").removeClass("idl-animted id-zoomout-anim");
});