css - CSS 旋转动画在 iOS 和 Mac 上的 Safari 上不旋转

Question

我想在加载时制作一个旋转动画，旋转在我的 Mac 上的 Chrome 上完美运行，但在我的 iPhone 上的 Chrome 和 iPhone 上的 Safari 浏览器上，它根本不旋转。

这是CSS：

div {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 3px solid rgba(195, 195, 195, 0.6);
  border-radius: 50%;
  border-top-color: #636767;
  animation: spin 1s infinite linear;
  -moz-animation:spin 1s infinite linear;
  -webkit-animation: spin 1s infinite linear;

    @keyframes spin {
    0%          { transform:rotate(0deg); }
    50%         { transform:rotate(180deg); }
    100%        { transform:rotate(360deg); }
  }

  @-webkit-keyframes spin {
      0%          { -webkit-transform:rotate(0deg); }
      50%         { -webkit-transform:rotate(180deg); }
      100%        { -webkit-transform:rotate(360deg); }
  }

  @-moz-keyframes spin {
    0%          { -moz-transform:rotate(0deg); }    
    50%         { -moz-transform:rotate(180deg); }
    100%        { -moz-transform:rotate(360deg); }
  }
} 

我尝试定义更多这样描述的动画，但它没有帮助：

{
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

你能帮我解决这个问题吗？

标签： cssreactjsanimationstyled-components