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