是否可以根据更改的类设置::after的动画？

<div class="box"></div>
<button onclick="changeClass()">Change Class</button>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

.box::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: blue;
  animation: myAnimation 1s infinite;
}

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

.animated::after {
  animation: myAnimation 2s infinite;
}

function changeClass() {
  var box = document.querySelector('.box');
  box.classList.toggle('animated');
}