ios - 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 度。