JSFiddle - React, Tailwind, and code Playground
HTML
<div class="whatever"></div>
<button class="animate">Animate</button>
<button class="nukeit">Wipe whatever out!</button>
CSS
.whatever {
margin: 20px;
width: 100px;
height: 100px;
background: red;
}
.animation {
animation: rotate 10s linear 1;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
JavaScript
$("button.animate").click(function() {
$("div.whatever").addClass("animation").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {
alert("Whatever has finished animating!");
});
});
$("button.nukeit").click(function() {
$("div.whatever").trigger("animationend");
$("div.whatever").remove();
});