CSS @-webkit-keyframes 动画不工作

Question

问题

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

当前状态

经过大量研究后，我注意到这似乎是一个常见问题，尤其是在 Stack Overflow 上。问题是，每个人的问题似乎都因动画或过渡需要而异，我一直无法找到适合我的解决方案。在尝试使用 shorthand 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

我无法标记或评论我当前的声誉，但之前已在此处回答过，请将其标记为重复

CSS @-webkit-keyframes 动画不工作

CSS @-webkit-keyframes animation not working

css

safari

webkit

keyframe

css-animations

问题

当前状态