Execute :hover and :hover:after animation with keyframes on component load

i would like to play this hover animation on component load, because I wrote a JS function that checks if the component is in the viewport and reloads it (changes its class). You can use Sass (scss) or regular css.

.module .active {
  display: inline-block;
  position: relative;
  color: var(--text-color-dark);
  animation: loadInAnimation ease 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes loadInAnimation { // add :hover and :hover:after event
  0% {
    // start of animation
  }

  100% {
    // end ofanimation
  }
}

.module .active:after { // transform into keyframe animation
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--primary-color);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.module .active:hover:after { // transform into keyframe animation
  transform: scaleX(1);
  transform-origin: bottom left;
}

Thank you for your help!

JS (irrelevant):

    <script>
      function reveal() {
        var reveals = document.querySelectorAll(".reveal");
        console.log(reveals);
      
        for (var i = 0; i < reveals.length; i++) {
          var windowHeight = window.innerHeight;
          var elementTop = reveals[i].getBoundingClientRect().top;
          var elementVisible = 150;
        
          if (elementTop < windowHeight - elementVisible) {
            reveals[i].classList.add("active");
          } else {
            reveals[i].classList.remove("active");
          }
        }
      }
      
      window.addEventListener("scroll", reveal);
      window.addEventListener("load", reveal);
    </script>

HTML (also irrelevant):

<h2 className='heading reveal'>Tennisakademie Vasquez</h2>