Question

我试图让这个CSS动画的旋转在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

查看

我做错了什么？我应该添加其他东西吗？

Answer 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

至于为什么这样做......老实说，我不知道。感觉像个臭虫。未在IE中测试过！

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

webkit变换旋转不在Safari上工作

2 个答案: