CSS 动画导致其他动画滞后

Question

我的霓虹灯代码有问题。它导致其他 CSS 动画滞后并且非常不稳定。我注意到这是当我使用动画填充选项“两者”捕获动画的最后一帧时。每当我将两个部分都更改为 NONE 或将其删除时，其他动画就可以正常工作。有什么想法吗？

   <script type="text/javascript">
      const header = window.document.getElementById("party-box-header");
      const captionONE = window.document.getElementById("party-box-caption-one");
      const captionTWO = window.document.getElementById("party-box-caption-two");
      const captionTHREE = window.document.getElementById("party-box-caption-three");
      const captionFOUR = window.document.getElementById("party-box-caption-four");
      // ------------------------------------------------------------------------
      const flickerLetter = letter => `<span class="display-1" style="
      animation: text-flicker-in-glow ${Math.random()*4}s linear both;
      -o-animation: text-flicker-in-glow ${Math.random()*4}s linear both;
      -ms-animation: text-flicker-in-glow ${Math.random()*4}s linear both;
      -moz-animation: text-flicker-in-glow ${Math.random()*4}s linear both;
      -webkit-animation: text-flicker-in-glow ${Math.random()*4}s linear both;
      color: hsla(${Math.random()*360}, 100%, 80%, 1)">${letter}</span>`
    const flickerAndColorText = text => 
      text
        .split('')
        .map(flickerLetter)
        .join('');


      // ------------------------------------------------------------------------
      const flickerLetterONE = letter => `<span class="h6" style="
      animation: text-flicker-in-glow ${Math.random()*7}s linear both;
      -o-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
      -ms-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
      -moz-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
      -webkit-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
      ">${letter}</span>`
      const colorLetterONE = letter => `<span class="h6" style="color: hsla(${Math.random()*360}, 100%, 80%, 1);">${letter}&nbsp;&nbsp;</span>`;
      const flickerAndColorTextONE = text => 
        text
          .split('')
          .map(flickerLetterONE)
          .map(colorLetterONE)
          .join('');

      // ------------------------------------------------------------------------
      const flickerLetterTWO = letter => `<span class="h6" style="
      animation: text-flicker-in-glow ${Math.random()*7}s linear both;
      -o-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
      -ms-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
      -moz-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
      -webkit-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
      ">${letter}</span>`
      const colorLetterTWO = letter => `<span class="h6" style="color: hsla(${Math.random()*360}, 100%, 80%, 1);">${letter}&nbsp;&nbsp;</span>`;
      const flickerAndColorTextTWO = text => 
        text
          .split('')
          .map(flickerLetterTWO)
          .map(colorLetterTWO)
          .join('');

      // ------------------------------------------------------------------------
      const flickerLetterTHREE = letter => `<span class="h6" style="
      animation: text-flicker-in-glow ${Math.random()*7}s linear both;
      -o-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
      -ms-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
      -moz-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
      -webkit-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
      ">${letter}</span>`
      const colorLetterTHREE = letter => `<span class="h6" style="color: hsla(${Math.random()*360}, 100%, 80%, 1);">${letter}&nbsp;&nbsp;</span>`;
      const flickerAndColorTextTHREE = text => 
        text
          .split('')
          .map(flickerLetterTHREE)
          .map(colorLetterTHREE)
          .join('');

      // ------------------------------------------------------------------------
      const flickerLetterFOUR = letter => `<span class="h6" style="
      animation: text-flicker-in-glow ${Math.random()*7}s linear both;
      -o-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
      -ms-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
      -moz-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
      -webkit-animation: text-flicker-in-glow ${Math.random()*7}s linear both;
      ">${letter}</span>`
      const colorLetterFOUR = letter => `<span class="h6" style="color: hsla(${Math.random()*360}, 100%, 80%, 1);">${letter}&nbsp;&nbsp;</span>`;
      const flickerAndColorTextFOUR = text => 
        text
          .split('')
          .map(flickerLetterFOUR)
          .map(colorLetterFOUR)
          .join('');

        const neonGloryFOUR = target => captionFOUR.innerHTML = flickerAndColorTextFOUR(captionFOUR.textContent);
        const neonGloryTHREE = target => captionTHREE.innerHTML = flickerAndColorTextTHREE(captionTHREE.textContent);
        const neonGloryTWO = target => captionTWO.innerHTML = flickerAndColorTextTWO(captionTWO.textContent); 
        const neonGloryONE = target => captionONE.innerHTML = flickerAndColorTextONE(captionONE.textContent);
        const neonGlory = target => header.innerHTML = flickerAndColorText(header.textContent);
        

        
        neonGlory(header);
        neonGloryONE(captionONE);
        neonGloryTWO(captionTWO);
        neonGloryTHREE(captionTHREE);
        neonGloryFOUR(captionFOUR);
      
    </script>