如何让CSS动画完成后反之亦然？

.animation {
  animation-name: myAnimation;
  animation-duration: 2s;
  animation-direction: alternate;
}

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

.transition {
  width: 100px;
  height: 100px;
  background-color: red;
  transition-property: width;
  transition-duration: 2s;
  transition-direction: alternate;
}

.transition:hover {
  width: 200px;
}

<div id="myElement"></div>

<script>
  var element = document.getElementById("myElement");
  element.addEventListener("animationend", function() {
    element.classList.toggle("reverse");
  });
</script>

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

  #myElement {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: myAnimation;
    animation-duration: 2s;
  }

  #myElement.reverse {
    animation-direction: reverse;
  }
</style>