JS animate movement with requestAnimationFrame and transition

move.js

function move(el, distance, duration) {
  let startTime;
  function recur() {
    window.requestAnimationFrame((time) => {
      if (startTime === undefined) {
        startTime = time;
      }
      const elapsed = time - startTime;
      const fraction = elapsed / duration;
      const dx = Math.min(distance, distance * fraction);
      console.log(time, elapsed, fraction, dx);
      el.style.transform = `translateX(${dx}px)`;
      if (elapsed < duration) {
        recur();
      }
    });
  }
  recur();
}

function move2(el, distance, duration) {
  el.style.transform = `translateX(${distance}px)`;
  el.style.transition = `${duration}ms linear`;
}

move(document.querySelector(".movable"), 500, 3000);
move2(document.querySelector(".movable2"), 500, 3000);