iOS端Safari与Chrome中CSS动画文字不显示，安卓及桌面端显示正常

问题原因 #

这个是iOS端WebKit内核的兼容问题：iOS系统中所有浏览器（包括Safari、Chrome等第三方浏览器）统一使用WebKit内核渲染，而WebKit目前不支持在@keyframes规则中动态修改伪元素的content属性，安卓和桌面端用的Blink内核支持该特性，所以只有iOS端无法展示动画内容。

解决方案 #

方案1：改用JS实现文本切换动画（兼容性最好）

放弃CSS伪元素动画，直接用JS控制目标元素的文本切换和过渡效果，适配所有平台：

1. 先删除原有CSS中.animated span:before和@keyframes animate的相关代码
2. 加入如下JS代码：

const animatedEl = document.getElementById('animated-name')
// 按顺序配置要展示的文本，换行用\n表示
const textList = [
  'Name Name',
  'Text Text\nText & Text'
]
let currentIndex = 0
// 给元素添加透明度过渡效果，也可以直接写在CSS文件里
animatedEl.style.transition = 'opacity 0.3s'

function switchAnimatedText() {
  // 先淡出
  animatedEl.style.opacity = 0
  setTimeout(() => {
    // 替换文本，把换行符转为br标签
    animatedEl.innerHTML = textList[currentIndex].replaceAll('\n', '<br>')
    // 淡入
    animatedEl.style.opacity = 1
    // 计算下一个要展示的文本索引
    currentIndex = (currentIndex + 1) % textList.length
  }, 300)
}

// 首次加载执行
switchAnimatedText()
// 每4秒切换一次，和你原CSS 8秒一轮的节奏对齐
setInterval(switchAnimatedText, 4000)

方案2：纯CSS兼容方案

如果不想写JS，可以把所有要展示的文本提前写到HTML的不同子元素里，用CSS控制不同子元素的显隐动画，不需要在@keyframes中修改content属性，同样可以适配WebKit内核。

注意事项 #

你代码里注释的部分取消后也要注意，所有涉及在@keyframes里改content的逻辑在iOS端都不会生效，调整时要避开这个写法。

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