如何制作动画绘制边框？(需要Vanilla JS解决方案)

<div class="animated-border"></div>

.animated-border {
  width: 200px;
  height: 200px;
  border: 2px solid #000;
  position: relative;
  overflow: hidden;
}

.animated-border::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  width: 0;
  height: 0;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transition: width 1s, height 1s, top 0.5s, left 0.5s;
}

.animated-border::after {
  content: "";
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 0;
  height: 0;
  border-bottom: 2px solid #000;
  border-left: 2px solid #000;
  transition: width 1s, height 1s, bottom 0.5s, right 0.5s;
}

.animated-border:hover::before,
.animated-border:hover::after {
  width: 100%;
  height: 100%;
}

.animated-border:hover::before {
  top: 0;
  left: 0;
}

.animated-border:hover::after {
  bottom: 0;
  right: 0;
}

const element = document.querySelector('.animated-border');
element.classList.add('animated-border');