iOS5上的CSS3无限旋转动画

Question

因此，我试图在iOS的Web应用程序上无限旋转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上完美运行。.但是，移动浏览器似乎不喜欢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度。