Currently, I'm diving into a tutorial on YouTube that teaches how to craft a CSS Glowing Border Animation
After putting in the effort to replicate the animation, I noticed a glitch that's been bothering me. It seems like there's an abrupt separation between two images during the transition, giving off a disjointed appearance.
Can anyone guide me on smoothing out this transition hiccup?
I've set up a JSFiddle to better illustrate my issue:
* {
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 class="box">
Greetings fellow developer!
</div>Additional note: The animation appears seamless initially, but around the 7-second mark, the "cut off" effect occurs, disrupting the smooth transition flow.