iOS浏览器文本动画失效求助：代码在Android端正常运行

嘿，这是iOS Safari的经典兼容性坑！你的代码在Android浏览器能正常运行，是因为Chromium内核对动态修改伪元素content的动画支持比较宽松，但iOS用的WebKit内核在这部分有严格限制——它不支持在@keyframes里直接修改伪元素的content属性，所以动画直接失效了。

给你一个兼容性拉满的替代方案，不用依赖伪元素的content动画，改用文本叠加+透明度动画的方式，在所有现代浏览器（包括iOS Safari）都能正常工作：

<!DOCTYPE html>
<html>
<head>
<style>
h2{ font-size: 45px; }
.text-switcher {
  position: relative;
  display: inline-block;
  width: 120px; /* 可根据最长文本（比如disruptor）调整宽度，避免布局跳动 */
  text-align: left;
}
.text-switcher span {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
  animation-name: textSwitch;
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end); /* 让切换更干脆，无渐变过渡 */
}
/* 给每个文本设置延迟，实现轮流显示 */
.text-switcher span:nth-child(1) { animation-delay: 0s; }
.text-switcher span:nth-child(2) { animation-delay: 2s; }
.text-switcher span:nth-child(3) { animation-delay: 4s; }
.text-switcher span:nth-child(4) { animation-delay: 6s; }

@keyframes textSwitch {
  0%, 24% { opacity: 1; } /* 每个文本显示2秒左右，对应总时长8s的25%区间 */
  25%, 100% { opacity: 0; }
}
</style>
</head>
<body>
<div><h2> I am your <div class="text-switcher">
  <span>mirror</span>
  <span>catalyst</span>
  <span>disruptor</span>
  <span>partner</span>
</div>.</h2></div>
</body>
</html>

方案细节说明： #

• 把要切换的文本分别放在独立的<span>中，用绝对定位让它们叠加在同一位置
• 通过opacity控制文本的显示/隐藏，配合动画延迟实现轮流切换效果
• 添加animation-timing-function: steps(1, end)让文本切换更生硬，和你原代码的content动画效果完全一致
• 设置固定宽度是为了避免文本切换时导致整体布局跳动，提升视觉体验

如果非要纠结伪元素的实现方式，目前WebKit内核确实不支持这种content动画，所以上面的方案是最稳妥的解决办法。

内容的提问来源于stack exchange，提问作者Kandy