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;
}

#bar.shrinking {
    -moz-animation: shrink 10s linear;
    -moz-animation-fill-mode: forwards;
    -o-animation: shrink 10s linear;
    -o-animation-fill-mode: forwards;
    -webkit-animation: shrink 10s linear;
    -webkit-animation-fill-mode: forwards;
    animation: shrink 10s linear;
    animation-fill-mode: forwards;
}

@-moz-keyframes shrink {
    from { width: 100%; } to { width: 0%; }
}

@-o-keyframes shrink {
    from { width: 100%; } to { width: 0%; }
}

@-webkit-keyframes shrink {
    from { width: 100%; } to { width: 0%; }
}

@keyframes shrink {
    from { width: 100%; } to { 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" );
} );