JavaScript classList使用CSS动画添加和删除函数

Question

我正在尝试使用javascript的keypress事件来控制动画，但是当我按下“ a”时，动画仅第一次运行。第二次我按“ a”键没有任何反应。 在我的情况下，classList.remove（）函数不起作用。

var tap = document.querySelector("body");
var circle = document.querySelector("#circle");

tap.addEventListener("keypress", function(keyPressed) {
  circle.classList.remove("a");
  circle.classList.remove("b");
  if (keyPressed.key === "a")
    circle.classList.add("a");
  if (keyPressed.key === "b") {
    circle.classList.add("b");
  }
});

h1 {
  color: red;
}

body {
  background-color: #000010;
}

.a {
  animation: aAnimation 2s 1s linear 1;
}

.b {
  background: pink;
}

#circle {
  width: 100px;
  height: 100px;
  background: red;
  margin: 0;
  padding: 0;
  border-radius: 50%;
}

@keyframes aAnimation {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(500px, 500px) scale(0);
  }
}

<h1>Home</h1>
<div id="circle"></div>