<h2>Border Gradient Color Animation</h2>
<div class="">
  <h1>VIBECODER</h1>
  <span class="span1"></span>
    <span class="span2"></span>
      <span class="span3"></span>
        <span class="span4"></span>

</div>
<div class="">
  <h1>VIBECODER</h1>
  <span class="span1"></span>
    <span class="span2"></span>
      <span class="span3"></span>
        <span class="span4"></span>

</div>
 body{
margin:0;
padding:0;
font-family: 'Rubik', sans-serif;
   background: black;
 }
 h2{

   color: white;
   line-height: 2;
   font-size: 42px;
   text-align: center;
   letter-spacing: 1px;
 }
 div{
      overflow: hidden;
   position: relative;
   margin-top: 50px;
   background: ghostwhite;
   margin-left: 5%;
   margin-right: 5%;
 }
h1{
  font-size: 48px;
  text-align: center;
  line-height: 2;
letter-spacing: 3px;
font-weight: 700;

}
/*span 1*/
.span1{
position: absolute;
top: 0;
height: 6px;
width: 100%;
background-image: linear-gradient(to right,#f8f8f8 0%,#F1E607 50%,#17B7C0 100%);
animation-name: moving1;
animation-duration: 2s;
animation-delay: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;

}
@keyframes moving1 {
  0%{
    transform: translateX(-100%);
  }
  100%{
    transform: translateX(100);
  }

}
/*span 2*/
.span2{
position: absolute;
bottom: 0;
height: 6px;
width: 100%;
background-image: linear-gradient(to left,#f8f8f8 0%,#BD07F1 50%,#F10707 100%);
animation-name: moving2;
animation-duration: 2s;
animation-delay: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;

}
@keyframes moving2 {
  0%{
    transform: translateX(100%);
  }
  100%{
    transform: translateX(-100);
  }

}
/*span3*/
/*span 2*/
.span3{
position: absolute;
right: 0;
height:100%;
width: 6px;
background-image: linear-gradient(to bottom,#f8f8f8 0%,#BD07F1 50%,#F10707 100%);
animation-name: moving3;
animation-duration: 2s;
animation-delay:1s;
animation-timing-function: linear;
animation-iteration-count: infinite;

}
@keyframes moving3 {
  0%{
    transform: translateY(-100%);
  }
  100%{
    transform: translateY(+100);
  }

}

/*span 4*/
.span4{
position: absolute;
top: 0;
left: 0;
height:100%;
width: 6px;
background-image: linear-gradient(to bottom,#f8f8f8 0%,#3411CF 50%,#11CFB9 100%);
animation-name: moving4;
animation-duration: 2s;
animation-delay:1s;
animation-timing-function: linear;
animation-iteration-count: infinite;

}
@keyframes moving4 {
  0%{
    transform: translateY(+100%);
  }
  100%{
    transform: translateY(-100);
  }

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.