如何在按钮标题之间移动的矩形动画？

<button id="myButton">按钮</button>

#myButton {
  position: relative;
  width: 100px;
  height: 50px;
  background-color: #ccc;
  border: none;
  color: #fff;
  font-size: 16px;
  transition: left 1s ease-in-out;
}

var button = document.getElementById("myButton");
var isMovingRight = true;
var currentPosition = 0;

function moveRectangle() {
  if (isMovingRight) {
    currentPosition += 10;
    if (currentPosition >= 200) {
      isMovingRight = false;
    }
  } else {
    currentPosition -= 10;
    if (currentPosition <= 0) {
      isMovingRight = true;
    }
  }
  button.style.left = currentPosition + "px";
}

setInterval(moveRectangle, 100);