How does requestAnimationFrame really work?

The official document says The method takes a callback as an argument to be invoked before the repaint. (https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)

I wrote a simple code below:

<html>
    <div style="width: 10px; height: 10px; background: #999"/>
    <script type="text/javascript">
        let count = 0;
        function step() {
            document.getElementsByTagName("div")[0].style.marginLeft = `${count ++}px`
            window.requestAnimationFrame(step)
        }
        step()
    </script>
</html>

My question is how to understand before the repaint? And why it works?

1. Can we just divide the running process of browser to repainting and before repainting, and requestAnimationFrame just avoid the callback invoked in painting process?

2. When browser repaint caused by the step, and the step will be invoked before the next repaint, but the repaint actually caused by the step. Is it paradox?