CSS动画在Safari 14.1.2及iOS设备无法运行，如何修复兼容问题？

核心原因 #

Safari 14及更早版本不支持在@keyframes中动态修改伪元素的content属性，这是你当前动画失效的根本问题，和前缀、keyframes区间写法无关。
另外你现有CSS存在冗余冲突：你先单独定义了拆分的动画属性，后续又写了animation简写属性，简写会覆盖所有前面拆分定义的属性，你之前给拆分属性加的前缀完全没有生效。

修复方案 #

1. 调整DOM结构（React/Gatsby代码） #

不要依赖伪元素的content动态变更，直接把所有轮播文案渲染为实DOM节点：

const scrollContents = [
  'First Content',
  'Second Content',
  'Third Content',
  'Fourth Content',
  'Fifth Content',
  'Sixth Content',
  'Seventh Content',
  'Eighth Content'
]

// 组件渲染部分
<p id="serviceScroll" className="heroServices">
  Services Include: 
  <br />
  <span className="scrollList">
    {scrollContents.map((text, index) => (
      <span key={index} className="scrollItem">{text}</span>
    ))}
  </span>
</p>

2. 重写CSS动画逻辑 #

只对opacity属性做动画，避免操作content，同时删除冗余的前缀和冲突属性：

.scrollList {
  position: relative;
  .scrollItem {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    -webkit-animation: scrollFade 30s ease-in-out infinite;
    animation: scrollFade 30s ease-in-out infinite;
    // 给每个元素错开动画时间，每个文案占6%的动画时长，对应你原来的时间分配
    @for $i from 0 through 7 {
      &:nth-child(#{$i + 1}) {
        -webkit-animation-delay: #{$i * 1.8 + 1}s; // 1s是初始延迟，30s*6%=1.8s每个间隔
        animation-delay: #{$i * 1.8 + 1}s;
      }
    }
  }
}

@-webkit-keyframes scrollFade {
  0% { opacity: 0; }
  3% { opacity: 1; }
  6% { opacity: 1; }
  9% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes scrollFade {
  0% { opacity: 0; }
  3% { opacity: 1; }
  6% { opacity: 1; }
  9% { opacity: 0; }
  100% { opacity: 0; }
}

3. 额外优化点 #

• 删除所有-ms-前缀，当前IE浏览器已停止维护，不需要兼容
• 删除-webkit-opacity写法，标准opacity在所有Safari版本都支持，不需要前缀
• 不要同时写拆分动画属性和简写动画属性，避免样式覆盖冲突

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