JSFiddle - React, Tailwind, and code Playground

HTML

<div id="theBox">
<div id="innerBox"></div>
</div>

CSS

body { padding: 10px; }

#theBox {
    border: 1px solid black;
    border-radius: 15px;
    width: 100px;
    height: 30px;
    overflow: hidden;
}

#innerBox {
    width: 100%;
    height: 100%;
    background-color: gray;
}

JavaScript

(function() {
    var requestAnimationFrame = window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
})();

setTimeout(function () {
    var start = window.mozAnimationStartTime || Date.now();
    function step(timestamp) {
        var progress = timestamp - start;
        var transformText = "translate(" + (70 * progress / 300) + "px)";
        if (progress >= 300) transformText = "translate(70px)";
        innerBox.style.webkitTransform = transformText;
        innerBox.style.MozTransform = transformText;
        if (progress < 300) {
            window.requestAnimationFrame(step);
        }
    }
    window.requestAnimationFrame(step);
}, 1000);