JSFiddle - React, Tailwind, and code Playground

HTML

<div id="goflash">TEST</div>
<input type="button" value="animate" onclick="animate()">

CSS

#goflash {
    width: 200px;
    height: 200px;
    left: 35px;
    top: 35px;
    position: absolute;
    background-color: red;
}
.anm-flash {
    -webkit-animation-name: flash;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes flash {
    from {
        -webkit-transform: rotate(0deg);
        background-color: red;
        }
    50% {-webkit-transform: rotate(120deg);
        background-color: yellow;
    }
    to {-webkit-transform: rotate(360deg);
        background-color: red;
    }
}

JavaScript

function animate () {
    var gf = document.querySelector("#goflash");
    gf.classList.remove("anm-flash");
    setTimeout(function() {
      gf.classList.add("anm-flash");
        gf.style.animationPlayState = "running";
    }, 50);
    setTimeout(function() {
        gf.style.animationPlayState="paused";
    }, 2550);
}