iOS5上的CSS3无限旋转动画

Question

所以我试图在我的 iOS 网络应用程序上无限旋转 png，但很难让它在模拟器中工作。这是我的 CSS：

 #spinner { -webkit-animation: spinner 1s infinite linear; }

@-webkit-keyframes spinner {
    0% { -webkit-transform: rotate3d(0,0,1,0deg); }
    100% { -webkit-transform: rotate3d(0,0,1,360deg); }
}

它可以在最新的 Chrome 上完美运行……但是，移动 safari 似乎不喜欢 0-360。我尝试了 0 到 180，但出于某种奇怪的原因，这有效……我怎么能 360 度全转？

谢谢！

Answer 1

正如 YuriAlbuquerque 所说，你可以这样做

@-webkit-keyframes spinner {
    0% { -webkit-transform: rotate3d(0,0,1,0deg); }
    25% { -webkit-transform: rotate3d(0,0,1,90deg); }
    50% { -webkit-transform: rotate3d(0,0,1,180deg); }
    75% { -webkit-transform: rotate3d(0,0,1,270deg); }
    100% { -webkit-transform: rotate3d(0,0,1,360deg); }
}

删除关键帧中的 25% 和 75% 也有效，但仅限于低于 ios6。在 ios6 中，如果不添加 25% 和 75%，那么它将顺时针旋转 180 度，而不是从 180 度到 360 度逆时针旋转。