CSS @-webkit-keyframes 动画不起作用[重复]

Question

问题

无法让 CSS @-webkit-keyframe 动画对 <span> 元素起作用。以下代码在 Chrome 上运行良好，但 Safari v.12.0.1 似乎不理解我想要它做什么 - 它不会通过预定义的关键帧进行动画处理。

当前状态

经过大量研究，我注意到这似乎是一个常见问题，尤其是在 Stack Overflow 上。问题是，每个人的问题似乎都因动画或过渡需求而异，我一直无法找到适合我的解决方案。在尝试使用速记 CSS 动画属性 { -webkit-animation: change 6s infinite; }) 无济于事后，我尝试单独列出每个 CSS 动画属性，因为我注意到这对某些人有效，但它也没有帮助我。

我无法弄清楚我在这里缺少什么。我什至检查过我是否满足Safari CSS Visual Effects Guide 的要求，而且据我所知，我满足关键帧动画的所有要求到“T”；我有一个名字，一个持续时间，我有关键帧。我在这里真的很茫然。

感谢任何人可以提供的任何帮助！

/* 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";
  }
}

<header>
  <div class="container">
    <h2 class="font-weight-dark mb-1"><span></span></h2>
  </div>
</header>

Answer 1

我不能用我目前的声誉来标记或评论，但这个问题之前已经在这里回答过，请将其标记为重复https://stackoverflow.com/a/40078500/2498992