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 () {
foo.className = "";
// uncomment the next line to make animations restart when you click
// x = fooStyle.color;
foo.className = "animate";
}