Animation doesn't happen after animationend event

Question

I have one div element I want to animate out and in right after out by adding classes via js.

Animation out goes well, but after animationend event and removing out class and adding in class, the animation doesn't happen. I'm wondering why? I tried to use requestAnimationFrame, but it didn't work.

(async function() {
  const boxEl = document.querySelector('.box');

  async function animationEnd(el) {
    return new Promise(resolve => {
      function handler() {
        // do something...
        resolve();
      }
      el.addEventListener('animationend', handler, { once: true });
    });
  }

  boxEl.classList.add('out');
  await animationEnd(boxEl);

  boxEl.classList.remove('out');
  boxEl.classList.add('in');
  await animationEnd(boxEl);
}());

@keyframes anim {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }      
}

.in, .out {
  animation-name: anim;
  animation-duration: 2000ms;
  animation-fill-mode: both;
}
.out {
  animation-direction: reverse;
}

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

<div class="box"></div>

Answer 1

Use animation-iteration-count: infinite;.

(async function() {
  const boxEl = document.querySelector('.box');

  async function animationEnd(el) {
    return new Promise(resolve => {
      function handler() {
        // do something...
        resolve();
      }
      el.addEventListener('animationend', handler, {
        once: true
      });
    });
  }

  boxEl.classList.add('out');
  await animationEnd(boxEl);

  boxEl.classList.remove('out');
  boxEl.classList.add('in');
  await animationEnd(boxEl);
}());

@keyframes anim {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.in,
.out {
  animation-name: anim;
  animation-duration: 2000ms;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

.out {
  animation-direction: reverse;
}

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

<div class="box"></div>