Animation inexplicably does not work in Safari, why?

Question

I've been working on an issue with CSS animation in iOS for about a week now, hoping for some help. I've tested the animation in Mozilla Firefox, Edge, IE and Google Chrome (using browserstack.com) and it works without issue. However, in Safari 14.1.2 it just doesn't work. Nothing shows up, like the animation never triggers its start. Here's the CSS code:

.scrollList {
      &::before {
        content: '';
        -webkit-animation-name: serviceScroll;
        -ms-animation-name: serviceScroll;
        animation-name: serviceScroll;
        -webkit-animation-duration: 30s;
        -ms-animation-duration: 30s;
        animation-duration: 30s;
        -webkit-animation-timing-function: ease-in-out;
        -ms-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        -webkit-animation-delay: 1s;
        -ms-animation-delay: 1s;
        animation-delay: 1s;
        -webkit-animation-direction: normal;
        -ms-animation-direction: normal;
        animation-direction: normal;
        -webkit-animation-fill-mode: both;
        -ms-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-play-state: running;
        -ms-animation-play-state: running;
        animation-play-state: running;
        -webkit-animation: serviceScroll 30s ease-in-out 1s infinite;
        -ms-animation: serviceScroll 30s ease-in-out 1s infinite;
        animation: serviceScroll 30s ease-in-out 1s infinite;
      }
    }
    @-webkit-keyframes serviceScroll {
      from {
        content: 'First Content';
        -webkit-opacity: 1;
        opacity: 1;
      }
      6% {
        -webkit-opacity: 0;
        opacity: 0;
      }
      12% {
        content: 'Second Content';
        -webkit-opacity: 1;
        opacity: 1;
      }
      18% {
        -webkit-opacity: 0;
        opacity: 0;
      }
      24% {
        content: 'Third Content';
        -webkit-opacity: 1;
        opacity: 1;
      }
      30% {
        -webkit-opacity: 0;
        opacity: 0;
      }
      36% {
        content: 'Fourth Content';
        -webkit-opacity: 1;
        opacity: 1;
      }
      42% {
        -webkit-opacity: 0;
        opacity: 0;
      }
      48% {
        content: 'Fifth Content';
        -webkit-opacity: 1;
        opacity: 1;
      }
      54% {
        -webkit-opacity: 0;
        opacity: 0;
      }
      60% {
        content: 'Sixth Content';
        -webkit-opacity: 1;
        opacity: 1;
      }
      66% {
        -webkit-opacity: 0;
        opacity: 0;
      }
      72% {
        content: 'Seventh Content';
        -webkit-opacity: 1;
        opacity: 1;
      }
      78% {
        -webkit-opacity: 0;
        opacity: 0;
      }
      84% {
        content: 'Eighth Content';
        -webkit-opacity: 1;
        opacity: 1;
      }
      90% {
        -webkit-opacity: 0.5;
        opacity: 0.5;
      }
      to {
        -webkit-opacity: 0;
        opacity: 0;
      }
    }
    @keyframes serviceScroll {
      0% {
        content: 'First Content';
        opacity: 1;
      }
      6% {
        opacity: 0;
      }
      12% {
        content: 'Second Content';
        opacity: 1;
      }
      18% {
        opacity: 0;
      }
      24% {
        content: 'Third Content';
        opacity: 1;
      }
      30% {
        opacity: 0;
      }
      36% {
        content: 'Fourth Content';
        opacity: 1;
      }
      42% {
        opacity: 0;
      }
      48% {
        content: 'Fifth Content';
        opacity: 1;
      }
      54% {
        opacity: 0;
      }
      60% {
        content: 'Sixth Content';
        opacity: 1;
      }
      66% {
        opacity: 0;
      }
      72% {
        content: 'Seventh Content';
        opacity: 1;
      }
      78% {
        opacity: 0;
      }
      84% {
        content: 'Eighth Content';
        opacity: 1;
      }
      90% {
        opacity: 0.5;
      }
      100% {
        opacity: 0;
      }
    }

   <p id="serviceScroll" className="heroServices">
      Services Include: 
      <br />
      <span className="scrollList"> </span>
   </p>

I started out not having prefix support for the animation, so I used an autoprefixer to add these in for -webkit- and -ms- throughout.

I've tried only using animation shorthand instead of defining each part one by one, but I found a stack overflow thread that said explicitly defining each animation part with -webkit- prefix resolves the issue. No change.

Previously, I had my animation going from 0% to 90%, but I found a stack overflow that said Safari doesn't support the animation unless it's defined from 0-100%. So I added the 100%. No change.

I changed the 0 / 100% to from / to because I have other animations on the site that work with only from / to and this site shows that this method of syntax is supported with Safari 4.0 and later and iOS 2.0 and later. No change.

I've been looking over the code in my browser dev tools and Safari does recognize the element as an animation, it just doesn't implement the animation changes, which is why I explicitly defined the animation-play-state: running. Still no change.

What needs to change in order for this animation to work in Safari and other iOS devices?

(Side note: I am using Gatsby / ReactJS.)