CSS Animation Causes other Animations to lag

I'm having an issue with my neon glow code. It's causing the other CSS animations to lag and be very choppy. I noticed it's when I capture the last frame of the animation using the animation fill options "both". Whenever I change the both part to NONE or just remove it, the other animations work just fine. Any ideas?

   <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>