JSFiddle - React, Tailwind, and code Playground
HTML
<div id="el">Hide Me</div>
CSS
@-webkit-keyframes fade-out {
0% { opacity: 1; }
100% { opacity: 0; }
}
div { display:block; cursor: pointer;}
div.hiding { -webkit-animation: fade-out .5s 1; }
div.hidden { display: none}
JavaScript
var el = document.getElementById("el");
el.addEventListener("webkitAnimationEnd", function(evt) {
el.className = "hidden";
}, false);
el.addEventListener("click", function (evt) {
el.className = (window.WebKitAnimationEvent) ? "hiding" : "hidden";
}, false);