JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
    <li>
        <button id="start-animation">Start animating the yellow bar</button>
    </li>
    <li>
        While the animation is still running, <button id="hide-container">set display: none on the containing div</button>
    </li>
    <li>
        <button id="show-container">Set the container back to display: block</button>
    </li>
    <li>
        In Webkit and IE11, the animation starts over from the beginning. In Firefox, it behaves as if the animation had been running in the background all along.
    </li>
</ol>
    
<div id="container">
    <div id="bar"></div>
</div>

CSS

#bar {
    width: 100%;
    height: 24px;
    background-color: #fc0;
    transition: width 10s linear;
}

#bar.shrinking {
    width: 0%;
}

.hide {
  opacity: 0;  
}
}

JavaScript

$("#start-animation").click( function() {
    $("#bar").addClass("shrinking");
} );

$("#hide-container").click( function() {
    $("#container").addClass( "hide" );
} );

$("#show-container").click( function() {
    $("#container").removeClass( "hide" );
} );