ios - iOS5 上的 CSS3 无限旋转动画

Question

所以我试图在我的iOS webapp上无限旋转一个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 度。