Adding shine animation not working in special cases

I have this function to shine any text element which is passed to it.

The first example here works fine (the second example doesn’t work, I provide this in case this can help us find out the issue):

function Shine(textElement) {
    textElement.classList.remove("shine");
    setTimeout(() => textElement.classList.add("shine"), 20);
    textElement.addEventListener("webkitAnimationEnd", shineEnd);
    function shineEnd(e) {
       if (e.animationName === 'shine') {
           //textElement.classList.remove("shine");
           textElement.removeEventListener("webkitAnimationEnd", shineEnd);
       } 
    } 
}


setTimeout(() => {
    const prepareCaption = document.querySelector(".prepareCaption");
    Shine(prepareCaption);
}, 2500);

.prepare-container {
  position: absolute;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin: 0 auto;
  left: 2.5%;
  height: 20vh;
  width: 95%;
  z-index: 11;
  top: 55vh;
  padding-top: 10px;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.prepareCaption {
  position: relative;
  filter: drop-shadow(2px 2px 2px #100021) drop-shadow(1px .05em 1px #0d021a);
  text-align: center;
  width: 100%;
  color: #f8f7fa;
  margin: 0 auto;
  opacity: 1;
  top: 0vh;
  transition: top 0.3s ease-in-out, opacity 0.3s ease-in-out;
}



.shine {
  background-color: currentColor;
  background-image: linear-gradient(-42deg, 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;
  animation: shine 4s ease-out 1 forwards;
}

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

<div class="prepare-container">
        <p class="prepareCaption" style="color: rgb(255, 0, 64); font-family: &quot;Open Sans Semibold&quot;; font-size: 28px;">This is shining</p>
    </div>

I expect this function work in any satiation but unfortunately we have this second example in which the function acts wired and doesn’t work as expected, here it is:

Note: the shine function is identical in both cases. the only difference is the element I pass to the function.

Here we want to shine the expandCaptionSpan id:

function Shine(textElement) {
    textElement.classList.remove("shine");
    setTimeout(() => textElement.classList.add("shine"), 20);
    textElement.addEventListener("webkitAnimationEnd", shineEnd);
    function shineEnd(e) {
       if (e.animationName === 'shine') {
           //textElement.classList.remove("shine");
           textElement.removeEventListener("webkitAnimationEnd", shineEnd);
       } 
    } 
}


setTimeout(() => {
    const expandCaption = document.querySelector("#expandCaptionSpan");
    Shine(expandCaption);
}, 2500);

.expandCaption {
  position: relative;
  font-family: "Open Sans Semibold", sans-serif;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
  text-align: center;
  width: 100%;
  font-size: 4vw;
  color: #ff0000; 
  margin: 0 auto;
  opacity: 1; 
  top: 0vh;
  transition: top 0.3s ease-in-out, opacity 0.4s ease-in-out;
}

.arrow {
  color: #ff9900;
  font-size: 2vw;
}

.arrow-samll {
    color: #ff4646;
    font-size: 1.5vw;
}

.left-arrow {
  padding-right: 7vw;
  transition: 1s ease-in-out;
}

.right-arrow {
  padding-left: 7vw;
}



.shine {
  background-color: currentColor;
  background-image: linear-gradient(-42deg, 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;
  animation: shine 4s ease-out 1 forwards;
}

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

<div class="expand-caption-container">
        <p class="expandCaption"><span class="left-arrow arrow-samll">‹</span>
    <span id="expandCaptionSpan">Permafrost</span><span class="right-arrow arrow-samll">›</span></p>
    </div>

How can I fix the second example? What am I missing?

Answer

It seems that your JS is the same but CSS not. I’ve found that text-shadow is causing the issue. Just replace it with filter as it’s done in your first example and it works. It seems that the issue is caused by render system.

function Shine(textElement) {
    textElement.classList.remove("shine");
    setTimeout(() => textElement.classList.add("shine"), 20);
    textElement.addEventListener("webkitAnimationEnd", shineEnd);
    function shineEnd(e) {
       if (e.animationName === 'shine') {
           //textElement.classList.remove("shine");
           textElement.removeEventListener("webkitAnimationEnd", shineEnd);
       } 
    } 
}


setTimeout(() => {
    const expandCaption = document.querySelector("#expandCaptionSpan");
    Shine(expandCaption);
}, 2500);

.expandCaption {
  position: relative;
  font-family: "Open Sans Semibold", sans-serif;
  /*text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);*/
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 1));
  text-align: center;
  width: 100%;
  font-size: 4vw;
  color: #ff0000; 
  margin: 0 auto;
  opacity: 1; 
  top: 0vh;
  transition: top 0.3s ease-in-out, opacity 0.4s ease-in-out;
}

.arrow {
  color: #ff9900;
  font-size: 2vw;
}

.arrow-samll {
    color: #ff4646;
    font-size: 1.5vw;
}

.left-arrow {
  padding-right: 7vw;
  transition: 1s ease-in-out;
}

.right-arrow {
  padding-left: 7vw;
}

.shine {
  background-color: currentColor;
  background-image: linear-gradient(-42deg, 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;
  animation: shine 4s ease-out 1 forwards;
}

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

<div class="expand-caption-container">
        <p class="expandCaption"><span class="left-arrow arrow-samll">‹</span>
    <span id="expandCaptionSpan">Permafrost</span><span class="right-arrow arrow-samll">›</span></p>
    </div>