Using HTML, CSS and VanillaJS, I have implemented a calendar - similar to the one that is shown when clicking on the time in the bottom right corner of a Windows PC.

When clicking on the spinner-arrows, I am switching between months. I want to add an animation to this, such that the calendar days are translated to the right / left and then fade out. For this purpose, I have added this little keyframes animation to my CSS:

.calendar__days.moveToRight {
    animation: moveToRightFadeOut 1s linear;
}

@keyframes moveToRightFadeOut {
    100% {
        transform: translateX(10%);
        opacity: 0;
    }
}

In my Javascript file, when adding the click-listeners to my spinner-arrows, I am also adding the "moveToRight" class to my "calendar__days"-div:

  addArrowEventListeners() {
    this.calendarElements.arrowRight.addEventListener('click', () => {
      this.calendarElements.calendarDays.classList.add("moveToRight");
      this.date.setMonth(this.date.getMonth() + 1);
      this.renderCalendar();
    });
  }

This works fine, but unfortunately only for the first time I click on the spinner-arrow. I know that I have to remove the class again in order for it to work every time I click on the spinner-arrow. But removing it right after adding it results in no effect at all. I have also tried using a timeout:

  setTimeout(this.calendarElements.calendarDays.classList.remove("moveToRight"), 2000);

This doesn't work either. Does anyone have an idea how to achieve this?