如何为前进和后退的路径设置动画？

<div class="box"></div>
<button onclick="moveForward()">前进</button>
<button onclick="moveBackward()">后退</button>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 0.5s ease;
}

.move-forward {
  transform: translateX(200px);
}

.move-backward {
  transform: translateX(0);
}

function moveForward() {
  var box = document.querySelector('.box');
  box.classList.add('move-forward');
}

function moveBackward() {
  var box = document.querySelector('.box');
  box.classList.remove('move-forward');
  box.classList.add('move-backward');
}