JSFiddle - React, Tailwind, and code Playground

by alexbfree

HTML

<button id="go">Go</button>
<div class="container">
    <div id="box"></div>
</div>

CSS

.container {position: relative;}

#box {
    height: 100px; 
    width: 100px; 
    background-color: #777;
    position: absolute;
    left: 5px;
    top: 5px;
    opacity: 0;
}

@-webkit-keyframes demo {
    0% {
        background-color: White;
        opacity:1;
    }
    25% {
        background-color: Green;
    }
    50% {
        background-color: White;
        opacity:1;
    }
    75% {
        background-color: Green;
    }
    100% {
        background-color: White;
        opacity:1;
    }    
}
    
.demo {
    -webkit-animation-name: demo;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
}

JavaScript

$("#go").click(function() {
    $("#box").removeClass("demo");
    setTimeout(function() {
        $("#box").addClass("demo");
    }, 1);
});