React项目中CSS keyframes动画在Safari浏览器无法生效求助

我在React.js项目中为导入的react-icon组件实现了颜色切换的CSS keyframes动画，该动画在Chrome和Firefox中正常运行，但在iPhone的Safari 16.4.1版本中完全不生效。已添加-webkit-前缀、拆分动画属性、定义0%和100%关键帧，尝试多种写法仍无效，同类型的十余种动画均存在此Safari兼容问题。

测试用代码（无CSS变量） #

CSS代码 #

.css3-logo {
  -webkit-animation-name: techs-animation1;
  animation-name: techs-animation1;
  -webkit-animation-duration: 9s;
  animation-duration: 9s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes techs-animation1 {
  0% {
    color: #000000;
  }
  5.56% {
    color: #ff0000;
  }
  11.11% {
    color: #000000;
  }
  100% {
    color: #000000;
  }
}

@keyframes techs-animation1 {
  0% {
    color: #000000;
  }
  5.56% {
    color: #ff0000;
  }
  11.11% {
    color: #000000;
  }
  100% {
    color: #000000;
  }
}

HTML测试结构 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

<h1 class="tech-logo css3-logo" title="CSS3">Hello</h1>

实际项目代码（使用CSS变量） #

CSS代码 #

.css3-logo {
  -webkit-animation-name: techs-animation1;
  animation-name: techs-animation1;
  -webkit-animation-duration: 9s;
  animation-duration: 9s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes techs-animation1 {
  0% {
    color: var(--black);
  }
  5.56% {
    color: var(--css3);
  }
  11.11% {
    color: var(--black);
  }
  100% {
    color: var(--black);
  }
}

@keyframes techs-animation1 {
  0% {
    color: var(--black);
  }
  5.56% {
    color: var(--css3);
  }
  11.11% {
    color: var(--black);
  }
  100% {
    color: var(--black);
  }
}

React组件代码 #

<DiCss3 className="tech-logo css3-logo" title="CSS3" />

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