.card-animate-border {
  position: relative;
  overflow: hidden;
}

.card-animate-border-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right,transparent,#17f3fd);
  animation: card-animate-border-top 2s linear infinite;
}

@keyframes card-animate-border-top {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.card-animate-border-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(to left,transparent,#17f3fd);
  animation: card-animate-border-bottom 2s linear infinite;
}

@keyframes card-animate-border-bottom {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.card-animate-border-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to top,transparent,#17f3fd);
  animation: card-animate-border-left 2s linear infinite;
  animation-delay: 1s;
}

@keyframes card-animate-border-left {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(-100%);
  }
}

.card-animate-border-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom,transparent,#17f3fd);
  animation: card-animate-border-right 2s linear infinite;
  animation-delay: 1s;
}

@keyframes card-animate-border-right {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}