I have a CSS animation for a group of spans that make out a word. I am having trouble getting them to work properly. It seems on page load or refresh, they don't work. They only work after I manually save my project file.

Here is the CSS:

.word {
  margin: 2rem;
}

.word span {
  cursor: pointer;
  display: inline-block;
  font-size: 4vw;
  user-select: none;
  line-height: 0.8;
  animation-iteration-count: 1;
}

.word span:nth-child(1).active {
  animation: balance 1.5s ease-out;
  transform-origin: bottom left;
}

@keyframes balance {
  0%,
  100% {
    transform: rotate(100deg);
  }

  30%,
  60% {
    transform: rotate(-45deg);
  }
}

.word span:nth-child(2).active {
  animation: shrinkjump 1s ease-in-out;
  transform-origin: bottom center;
}

@keyframes shrinkjump {
  10%,
  35% {
    transform: scale(2, 0.2) translate(0, 0);
  }

  45%,
  50% {
    transform: scale(1) translate(0, -150px);
  }

  80% {
    transform: scale(1) translate(0, 0);
  }
}

.word span:nth-child(3).active {
  animation: falling 2s ease-out;
  transform-origin: bottom center;
}

@keyframes falling {
  12% {
    transform: rotateX(240deg);
  }

  24% {
    transform: rotateX(150deg);
  }

  36% {
    transform: rotateX(200deg);
  }

  48% {
    transform: rotateX(175deg);
  }

  60%,
  85% {
    transform: rotateX(180deg);
  }

  100% {
    transform: rotateX(0deg);
  }
}

.word span:nth-child(4).active {
  animation: rotate 1s ease-out;
}

@keyframes rotate {
  20%,
  80% {
    transform: rotateY(180deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

.word span:nth-child(5).active {
  animation: shrinkjump 1s ease-in-out;
  transform-origin: bottom center;
}

.word span:nth-child(6).active {
  animation: falling 2s ease-out;
  transform-origin: bottom center;
}

.word span:nth-child(7).active {
  animation: toplong 1.5s linear;
}

.word span:nth-child(8).active {
  animation: balance 1.5s ease-out;
  transform-origin: top left;
}

@keyframes toplong {
  10%,
  40% {
    transform: translateY(-48vh) scaleY(1);
  }

  90% {
    transform: translateY(-48vh) scaleY(4);
  }
}

And here is the JavaScript to change the className:

const spans = document.querySelectorAll(".word span");

spans.forEach((span, idx) => {
  span.addEventListener("click", (e) => {
    e.target.classList.add("active");
  });

  span.addEventListener("animationend", (e) => {
    e.target.classList.remove("active");
  });
});

Does anyone have any idea why the css is behaving this way? I have experimented with a timeout and with the JavaScript to udpate the className. Thanks!