如何播放相同的动画‘反向’没有选择器和‘正常’上:活动？

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

.element {
  animation: myAnimation 1s forwards;
}

.element.reverse {
  animation-direction: reverse;
}

<div id="element" style="width: 100px; height: 100px; background-color: red;"></div>
<button onclick="playAnimation()">播放动画</button>
<button onclick="reverseAnimation()">反向播放</button>

<script>
  var element = document.getElementById("element");
  var animation;

  function playAnimation() {
    element.style.animation = "myAnimation 1s forwards";
  }

  function reverseAnimation() {
    element.style.animation = "myAnimation 1s reverse forwards";
  }
</script>