CSS 关键帧动画不适用于 Safari 浏览器

Question

我正在尝试在我的 react.js 应用程序中构建颜色变化动画。它在 chrome 和 firefox 上正常工作，但在 safari 上不工作：

.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);
  }
}

我尝试了很多不同的变体和格式，但没有任何效果。我目前将所有命令分成不同的行（而不是像这样组合它们：-webkit-animation: techs-animation1 9s infinite;）。

这是其他徽标的十几个类似动画之一，所有这些动画都应该在 9s 动画过程中按顺序改变颜色。同样，在 chrome 和 firefox 上可以正常工作。

所有在线和stackoverflow搜索都表明safari使用@-webkit-keyframes，它们应该放在@keyframes动画之前，并且需要定义0%和100%。但这仍然行不通。

这是一个 react.js 应用程序，颜色变化动画应该在我导入的 react-icon 上工作，以防对 safari 产生一些影响：

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

Answer 1

您使用的 Safari 版本可能早于 13.1 版本

参考