JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
When you toggle <code>visibility: hidden</code> in blink-based browsers, animation freezes for good.<br/>
<button onclick="document.getElementById('hider').classList.toggle('hidden')">toggle visibility</button>
<div id="hider">
Some stuff.
<span class="bounce animated infinite"></span>
</div>
CSS
span {
display: inline-block;
width: 10px; height: 10px;
border-radius: 50%;
background: red;
}
div {
display: block;
}
.hidden {
display: none;
}