title: CSS @-webkit-keyframes animation not working
body: <h2>Problem</h2>
  
  <p>Having trouble getting CSS @-webkit-keyframe animations to work against a <code>&lt;span&gt;</code> element. The following code works great on Chrome, but Safari v.12.0.1 doesn't seem to understand what I want it to do - it doesn't animate through the pre-defined keyframes. </p>
  
  <h2>Current Status</h2>
  
  <p>After doing a lot of research, I've noticed this seems to be a common problem, especially here on Stack Overflow. Problem is, everyone's issues seem to vary based on animation or transition need and I haven't been able to find a solution that works for me. After trying to use the shorthand CSS animation property <code>{ -webkit-animation: change 6s infinite; }</code>) to no avail, I tried breaking out and listing each CSS animation property individually as I noticed that has worked for some, but it hasn't helped me either.</p>
  
  <p>I cannot figure out what I'm missing here. I've even checked to see that I'm meeting the <a href="https://developer.apple.com/library/archive/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/AnimatingWithKeyframes/AnimatingWithKeyframes.html" rel="nofollow noreferrer">Safari CSS Visual Effects Guide</a> and, as far as I can tell, I'm meeting all requirements for keyframe animations to a 'T'; I have a name, a duration, and I have keyframes. I'm truly at a loss here. </p>
  
  <p>Appreciate any help anyone can provide!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Setting display property to block */
  
  span {
    display: block;
  }
  
  
  /* Setting span animation and keyframes */
  
  span:before {
    display: block;
    content: "FIRST STRING";
    animation: change 6s infinite;
    -webkit-animation-name: change;
    -webkit-animation-duration: 6s;
    -webkit-animation-iteration-count: infinite;
  }
  
  
  /* Safari and Chrome */
  
  @-webkit-keyframes change {
    0% {
      content: "FIRST STRING";
    }
    25% {
      content: "SECOND STRING";
    }
    50% {
      content: "THIRD STRING";
    }
    75% {
      content: "FOURTH STRING";
    }
    100% {
      content: "FIRST STRING";
    }
  }
  
  @keyframes change {
    0% {
      content: "FIRST STRING";
    }
    25% {
      content: "SECOND STRING";
    }
    50% {
      content: "THIRD STRING";
    }
    75% {
      content: "FOURTH STRING";
    }
    100% {
      content: "FIRST STRING";
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
    &lt;div class="container"&gt;
      &lt;h2 class="font-weight-dark mb-1"&gt;&lt;span&gt;&lt;/span&gt;&lt;/h2&gt;
    &lt;/div&gt;
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>