JSFiddle - React, Tailwind, and code Playground

HTML

<span class="test" id="test" name="test">Aaaaa...</span>

<p/>&nbsp;
<p/>
<input type="button" id="mybutton" name="mybutton" value="Run test" />

CSS

.test {
     -webkit-animation-play-state: paused;
     animation-play-state: paused;
}

.change {
    padding-left: 10px;
    border: 1px solid black;
    animation: redToTransparent 1s;
    animation-play-state: running;
    -webkit-animation: redToTransparent 1s;
    -webkit-animation-play-state: running;
}
@keyframes redToTransparent {
    from {
        background-color: rgba(255, 0, 0, 0);
    }
    to {
        background-color: rgba(255, 0, 0, 255);
    }
}
@-webkit-keyframes redToTransparent {
    from {
        background-color: rgba(255, 0, 0, 0);
    }
    to {
        background-color: rgba(255, 0, 0, 255);
    }
}

JavaScript

jQuery('#mybutton').click(function() {
     jQuery('#test').removeClass("change");
     console.log(jQuery('#test').attr("class"));
     jQuery('#test').addClass("change", 100);
    
    //jQuery('#test').toggleClass("change");
 });