SOURCE

function animate(timingFun = new Function(), draw = new Function(), 
duration = 2000) {
    let start = performance.now()
    requestAnimationFrame(function inner(timing) {
        let timeFraction = (timing - start) / duration
        timeFraction = timeFraction > 1 ? 1 : timeFraction
        const progress = timingFun(timeFraction)
        draw(progress)
        if (timeFraction < 1) {
            requestAnimationFrame(inner)
        }
    })
}

animate(
    (fraction) => fraction, 
    (progress) => {
        const ball = document.querySelector('#test')
        ball.style['marginLeft'] = progress * 100 + '%'
    },
    5000
)

<div id="outer">
    <div id="test"></div>
</div>

#test{
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 50px;
}

#outer{
    width: 100%;
    background-color: yellowgreen;
}