JSFiddle - React, Tailwind, and code Playground

HTML

<div id="square"></div>

CSS

#square
{
    width:100px;
    height:100px;
    background:red;
}

#square.anim {
    animation:myfirst 0.5s 0;
    -webkit-animation:myfirst 0.5s 0; /* Safari and Chrome */
}

@keyframes myfirst
{
    0%      {background:red;}
    25%     {background:yellow;}
    75%     {background:yellow;}
    100%    {background:red;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%      {background:red;}
    25%     {background:yellow;}
    75%     {background:yellow;}
    100%    {background:red;}
}

JavaScript

$(document).ready(function() {
    $("#square").on("mouseenter", function(){
        if(!$("#square").hasClass("anim")) {
            $(this).addClass("anim");
            setTimeout('$("#square").removeClass("anim");', 500);
        }
    });
});