webkit 转换旋转在 Safari 上不起作用答案

【问题标题】：webkit transform rotate not working on Safariwebkit 转换旋转在 Safari 上不起作用
【发布时间】：2018-09-18 02:57:53
【问题描述】：

我试图让这个 CSS 动画的 rotation 在 Safari 上工作。

@keyframes hexagon {
  0% { transform:rotate(0deg); }
  50% { transform:rotate(360deg); }
  68% { transform:rotate(0deg); transform:scale(1); }
  71% { transform:rotate(0deg); transform:scale(1); }
  76% { transform:rotate(360deg); transform:scale(1.25); }
  85% { transform:rotate(360deg); transform:scale(1); }
  86% { transform:rotate(360deg); transform:scale(1); }
  100% { transform:rotate(0deg); }
}

您可以在https://codepen.io/bryceyork/pen/JdRbQw查看它

我已经添加了 webkit- 前缀，但它仍然不起作用：

@-webkit-keyframes hexagon {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  68% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  71% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  76% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
    -webkit-transform: scale(1.25);
            transform: scale(1.25);
  }
  85% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  86% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

您可以在https://codepen.io/anon/pen/qoQGeL查看它

我做错了什么？我应该添加其他内容吗？

【问题讨论】：

您需要重复整个 @keyframes 指令，无论是否使用 -webkit-。你也可以在你的 bundle 或 codepen 选项中添加 autoprefixer。
感谢您的回复！我已经在这里完成但仍然无法正常工作...codepen.io/anon/pen/eMbayg

标签： css sass safari

【解决方案1】：

这个问题很烦人，但我想我是靠蛮力解决的。您可能需要调整时间。我没有触摸您的原始关键帧，但确实更改了 webkit 关键帧。为 webkit 使用一组不同编码的关键帧似乎可以做你想做的事情：

@keyframes hexagon {
  0% { transform:rotate(0deg); }
  50% { transform:rotate(360deg); }
  68% { transform:rotate(0deg); }
  71% { transform:rotate(0deg) scale(1); }
  76% { transform:rotate(360deg) scale(1.25); }
  85% { transform:rotate(360deg) scale(1); }
  86% { transform:rotate(360deg); }
  100% { transform:rotate(0deg); }
}

@-webkit-keyframes hexagon {
  0% { 
  -webkit-transform:rotate(0deg) scale(1); 
  }
  75% { 
  -webkit-transform:rotate(360deg) scale(1);  
  }
  75.1% { 
  -webkit-transform:rotate(0deg) scale(1);  
  }
  80% { 
  -webkit-transform:rotate(0deg) scale(1); 
  }
  88% { 
  -webkit-transform:rotate(0deg) scale(1.25); 
  }
  96% { 
  -webkit-transform:rotate(0deg) scale(1); 
  }
  100% { 
  -webkit-transform:rotate(0deg) scale(1);
  }

}

https://codepen.io/anon/pen/zWeYwL 你会在 codepen 中注意到我也是这样做的：

-webkit-animation: hexagon 3.5s ease infinite;
 animation: hexagon 4s ease-in-out

至于为什么会这样……老实说，我不知道。感觉是个bug。未在 IE 中测试！

【讨论】：

非常感谢！我会仔细检查代码

【解决方案2】：

您正在覆盖您的转换属性。

如果您想要两种转换，请用空格分隔它们。

也不要忘记为变换和关键帧添加前缀。供应商前缀必须放在原始前缀之前。

整个代码如下所示：

@-webkit-keyframes hexagon {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  68% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  71% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  76% {
    -webkit-transform: rotate(360deg) scale(1.25);
            transform: rotate(360deg) scale(1.25);
  }
  85% {
    -webkit-transform: rotate(360deg) scale(1);
            transform: rotate(360deg) scale(1);
  }
  86% {
    -webkit-transform: rotate(360deg) scale(1);
            transform: rotate(360deg) scale(1);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes hexagon {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  68% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  71% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  76% {
    -webkit-transform: rotate(360deg) scale(1.25);
            transform: rotate(360deg) scale(1.25);
  }
  85% {
    -webkit-transform: rotate(360deg) scale(1);
            transform: rotate(360deg) scale(1);
  }
  86% {
    -webkit-transform: rotate(360deg) scale(1);
            transform: rotate(360deg) scale(1);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

【讨论】：