动画CSS无法在Safari浏览器中工作

Question

animation: shine 4s linear infinite;
@keyframes shine {
        0% {
          background-position-x: -500%;
        }
        100% {
          background-position-x: 500%;
        }
      }

我在react js网页中使用这种风格。它适用于除 Safari 浏览器之外的所有浏览器，我不知道为什么。

Safari 浏览器未显示该动画文本。

任何人都可以帮助解决此问题

Answer 1

找到了解决方案。在 Safari 中，当您使用关键帧时，您需要使用整个百分比：

这不会起作用：

@-webkit-keyframes shine{
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(-14deg); }
    10% { -webkit-transform: rotate(0deg); }
}

这会：

@-webkit-keyframes shine{
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(-14deg); }
    10% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(0deg); }
}

不知道为什么，但这就是 Safari 的工作方式！ :)