JSFiddle - React, Tailwind, and code Playground

HTML

<p id="foo">CLICK ME</p>

CSS

@keyframes x {
    0% { background-color: blue; }
    100% { background-color: yellow; }
}

.animate { animation: x 5s linear both; }

JavaScript

foo = document.getElementById ("foo");
fooStyle = window.getComputedStyle (foo);

foo.onclick = function () {
    x = "start: " + fooStyle.backgroundColor;
    foo.className = "";
    // uncomment the next line to make animations restart when you click
    // x += "\nmiddle: " + fooStyle.backgroundColor;
    foo.className = "animate";
    x += "\nend: " + fooStyle.backgroundColor;
    alert (x);
}