Glowing border animation with CSS doesn't have a fluid transition-CodePudding

I'm following a tutorial on youtube on how to create a Glowing Border Animation with CSS

I tried to implement it myself and was pretty successful, however, I encountered a problem which I'm unable to solve. When I view my animation there is an uneven transition. It looks like as if two images are stuck together where the colours transition is cut off.

How can I solve the issue there with my transition looks smooth?

I created a JSFiddle to display what I mean:

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #151320;
}

.box {
  position: relative;
  width: 300px;
  height: 300px;
  color: #fff;
  font: 300 2rem 'Montserrat';
  text-align: center;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}

.box::before,
.box::after {
  content: '';
  z-index: -1;
  position: absolute;
  width: calc(100%   30px);
  height: calc(100%   30px);
  top: -15px;
  left: -15px;
  background: linear-gradient(45deg, #0096FF, #0047AB, #000000, #6082B6, #87CEEB, #00008B, #145DA0, #00008B, #145DA0, #0096FF, #0047AB, #000000, #6082B6, #87CEEB);
  background-repeat: repeat;
  border-radius: 5px;
  background-size: 600%;
  animation: border 12s linear infinite;
}

.box::after {
  filter: blur(25px);
}

@keyframes border {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 250% 250%;
  }
}

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>

<div >
  Greetings fellow developer!
</div>

Note: The animation looks smooth at first but after about 7ish seconds you encounter the "cut off" where the transition doesn't line up.

CodePudding user response：

Your gradient need to have a kind of repetition to achieve such effect. Make its size 200% 200% then use a repeating gradient where the first color start at 0% and the last one at 50%. Notice how the list of color is repeated twice but in the opposite order.

body {
  background: #151320;
}

.box {
  position: relative;
  width: 300px;
  height: 300px;
}

.box::before,
.box::after {
  content: '';
  z-index: -1;
  position: absolute;
  inset: -15px;
  background: 
   repeating-linear-gradient(45deg,
    #0096FF 0%, #0047AB, #6082B6, #87CEEB, #00008B,
    #00008B, #87CEEB, #6082B6,#0047AB,#0096FF 50%);
  border-radius: 5px;
  background-size: 200% 200%;
  animation: border 2s linear infinite;
}

.box::after {
  filter: blur(25px);
}

@keyframes border {
  0% {
    background-position: bottom left;
  }
  100% {
    background-position: top right;
  }
}

<div >
</div>