如何在随机间隔内以不同的速度移动500像素的对象？

<div id="moving-object"></div>

#moving-object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: move;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(500px);
  }
}

function getRandomInterval() {
  return Math.random() * 5000 + 1000; // 生成1000到6000毫秒之间的随机间隔
}

function getRandomSpeed() {
  return Math.random() * 2 + 1; // 生成1到3之间的随机速度
}

function startAnimation() {
  var object = document.getElementById('moving-object');
  var interval = getRandomInterval();
  var speed = getRandomSpeed();

  object.style.animationDuration = speed + 's';
  setTimeout(startAnimation, interval);
}

startAnimation();

<div id="moving-object"></div>

#moving-object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
}

function getRandomInterval() {
  return Math.random() * 5000 + 1000; // 生成1000到6000毫秒之间的随机间隔
}

function getRandomSpeed() {
  return Math.random() * 2 + 1; // 生成1到3之间的随机速度
}

function moveObject() {
  var object = document.getElementById('moving-object');
  var currentPosition = parseInt(object.style.left) || 0;
  var targetPosition = currentPosition + 500;
  var speed = getRandomSpeed();

  var interval = setInterval(function() {
    currentPosition += speed;
    object.style.left = currentPosition + 'px';

    if (currentPosition >= targetPosition) {
      clearInterval(interval);
      setTimeout(moveObject, getRandomInterval());
    }
  }, 10);
}

moveObject();