JSFiddle - React, Tailwind, and code Playground

by louisremi

HTML

<div style="left: 10px;"></div>
<div style="left: 50px; display:none;"></div>
<p style="margin-top: 40px">Watch the normal rate of animations, switch to another tab for a few seconds before switching back and seeing queued animations running consecutively.</p>

CSS

div {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #FF6600;
}

JavaScript

var $divs = $("div");
// Queue an animation on each div every 1s
setInterval(function() {
    // Fade the div out if it's visible and
    // fade it in if it's hidden.
    $divs.fadeToggle(
        // Animation is 250ms long.
        250, "linear"
    );
}, 1000);