javascript - Remove jerky distortion from outer border of the text in this shine animation

Question

I have a class named shine. if we add it to a text element it would shine the text like this:

Note that I added the class in the Shine function and after finishing the animation I remove the shine class:

setTimeout(() => {
        Shine(2); // shine over the text in 2 seconds
}, 2500);

function Shine(duration) {
  const textElement = document.querySelector('.text-element');
    textElement.classList.remove("shine");
    setTimeout(() => {
        textElement.classList.add("shine");
        textElement.style.animation = `shine ${duration}s ease-in-out 1`;
    }, 20);
    textElement.addEventListener("webkitAnimationEnd", shineEnd);
    function shineEnd(e) {
       if (e.animationName === 'shine') {
           textElement.style.animation = '';
             textElement.classList.remove("shine");
           textElement.removeEventListener("webkitAnimationEnd", shineEnd);
       } 
    } 
}

body {
  background: black;
}

.shine {
  background-color: currentColor;
  background-image: linear-gradient(-45deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
  background-position: -100%, 0%;
  background-repeat: no-repeat, repeat;
  background-size: 60%;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

@keyframes shine {
  from { background-position: -100%, 0%; }
  to { background-position: 200%, 0%; }
}

.text-element {
  font-size: 65px;
  display: inline-block;
  color: #dba2ff;
  /* filter: drop-shadow(1px 1px 1px #100021); */
}

<div>   
   <span class="text-element">Smoothly</span>
</div>

question from:https://stackoverflow.com/questions/65830007/remove-jerky-distortion-from-outer-border-of-the-text-in-this-shine-animation

Answer 1

Waitting for answers