Javascriptで疑似要素を操作できるか

Question

下記のように、ボックスに対して
マウスオーバーしたときに、ボックスの輪郭線をアニメーションで描くようなCSSを作りました。

疑似要素であるhoverを使っているため、このアニメーションを行う条件はマウスオーバーのみになっていますが、
スクロールをして該当箇所が表示された際にアニメーションを行いたいと考えていますが、調べていてもやり方がわかりませんでした。

現在は疑似要素を使っていますが、実現可能であれば疑似要素以外でも大丈夫です。

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

div{
  width:400px;
  height:400px;
  background:#888;
  display:block;
  position:relative;
  
  &::before {
    content:"";
    width:2px;
    height:0px;
    position: absolute;
    display:block;
    bottom:0;
    right:0;
    transition:all .5s ease;
    background-color: black;
    z-index:5;
  }
  
  &::after {
    content:"";
    width:0px;
    height:2px;
    position: absolute;
    display:block;
    bottom:0;
    left:0;
    transition:all .5s ease;
    background-color: black;
    z-index:5;
  }
  
  &:hover {
    &::before {
      height:calc(100%+1px);
      height:100%;

    }
    &::after {
      width:calc(100%+1px);
      width:100%;
    }
  }
}

Answer 1

下記の過去質問が参考になるかと。

JavaScript - JavaScriptで":after","before"などの擬似要素のCSS変更は可能ですか？｜teratail

Answer 2

ベストアンサーの方のUrlを参考に、

div {
    &.active {
         &::before{ 
　　　　　　　//～中身～
         }
    }
}

というような形にしました。
また、transitionではなくanimationで動作するようにし、
Javascriptで一定量のスクロールが行われた場合に、activeクラスを付与することで
目的動作が得られました。