Animating a gradient using a small percentage might do the trick, if this doesn't point you in the right direction and I find some time I might type something out.
--------------- Added 1614636808 at 1614636808 ---------------
Animations are not my thing, but this is a little closer to your desired effect. took me a whole 2 minutes to type up, and only played with the positioning for a minute before I got over it, a little fiddling I'm sure you can get it perfected how you want it.
<h1 class="username animated">DrCustUmz</h1>
.username {
text-align: center;
font-size: 25px;
}
.animated {
background: linear-gradient(to right, #ff0000, #000);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: animation 15s linear infinite;
background-size: 20%;
}
@keyframes animation {
0%,100% {
background-position: 10%;
}
99% {
background-position: 100%;
}
}
--------------- Added 1614637794 at 1614637794 ---------------
Exact effect, Figured out a way but dont thing it would be possible for a username, not easily atleast.
<div class="username">
<span>D</span>
<span>r</span>
<span>C</span>
<span>u</span>
<span>s</span>
<span>t</span>
<span>U</span>
<span>m</span>
<span>z</span>
</div>
.username > span {
text-transform: uppercase;
animation: flash 2s ease-in-out infinite;
}
@keyframes flash {
0%, 100% {
color: #FF0000;
}
10%, 90% {
color: #000;
}
}
.username > span:nth-child(2) {
animation-delay: 0.25s;
}
.username > span:nth-child(3) {
animation-delay: 0.5s;
}
.username > span:nth-child(4) {
animation-delay: 0.75s;
}
.username > span:nth-child(5) {
animation-delay: 1s;
}
.username > span:nth-child(6) {
animation-delay: 1.25s;
}
.username > span:nth-child(7) {
animation-delay: 1.5s;
}
.username > span:nth-child(8) {
animation-delay: 1.75s;
}
.username > span:nth-child(9) {
animation-delay: 2s;
}