Html 需要帮助实现悬停动画效果

我目前正在制作一个悬停动画，目标是实现以下效果: Link to expected animation个

我已经创建了一个Code Sandbox来展示我目前的方法.

此动画中使用的资源可以是found here.

我对任何关于悬停动画的建议或改进都持开放态度.任何真知灼见都将不胜感激.谢谢!

我很难控制动画的循环.

<div class="wrapper">
  <div class="card">
    <div class="wrap"></div>
  </div>
</div>

body {
  background: #000;
}

.wrapper {
  width: 400px;
  height: 200px;
  margin: auto;
}
.card {
  z-index: 1;
  height: 200px;
  position: relative;
  background: #2c2c2c;
  border-radius: 8px;
  cursor: pointer;
}

.card::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -2px;
  background-image: url("./bg-2.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: -1;
  transition: all 0.5s ease-in-out;
  clip-path: inset(0 0 0 0);
}

.card:hover::before {
  animation: clippath 0.9s linear forwards;
}

.card:not(:hover)::before {
  clip-path: inset(0 0 0 0);
  transition: all 0.5s ease-in-out;
  background-image: url("./bg-1.png");
}

.wrap {
  background: #2c2c2c;
  border-radius: 8px;
  height: 200px;
}

@keyframes clippath {
  0%,
  100% {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
  25% {
    -webkit-clip-path: inset(0 98% 0 0);
    clip-path: inset(0 0 0 98%);
  }
  50% {
    -webkit-clip-path: inset(98% 0 0 0);
    clip-path: inset(98% 0 0 0);
  }
  75% {
    -webkit-clip-path: inset(0 0 0 98%);
    clip-path: inset(0 98% 0 0);
  }
}