//border3
          var revealThree = document.querySelectorAll('.BorderThree');

          for(var i = 0; i < revealThree.length; i++){

            var windowheight = window.innerHeight;
            var revealtop = revealThree[i].getBoundingClientRect().top;
            var revealpoint = 50;

            if(revealtop < windowheight - revealpoint){
              revealThree[i].classList.add('active');
            }
            else{
              revealThree[i].classList.remove('active');
            }
          }

 

I tried creating a border but when I added a js function, the border's background color suddenly became grey when it should only be a border.

Here's the code for CSS:

    .BorderThree{
      width: 300px;
      height: 450px;
      position: absolute;
      top: 900px;
      border-style: solid;
      border-color: azure;
      left: 900px;
      transform: translateY(150px);
      opacity: 0;
      transition: all 2s ease;

    }

.BorderThree.active{
  transform: translateY(0px);
  opacity: 1;
color: #000;
}

and when I tried adjusting the the opacity, the whole border is affected. I'd appreciate your help, thank you.