iOS5上的CSS3無限旋轉動畫

所以我試圖無限地旋轉我的iOS上的web應用程序的PNG，但很難讓它在模擬器中工作。在這裏我的CSS：iOS5上的CSS3無限旋轉動畫

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

它完美的最新然而，移動Safari瀏覽器似乎作品鉻..不喜歡0-360。我嘗試了0到180，這有些奇怪的原因...我怎麼可以全部360度？

謝謝！

來源

2012-06-27 opfeffer

您是否曾嘗試以50％和90deg的比例放置180度以避免含糊不清？ – YuriAlbuquerque

我會猜測Safari會將0和360deg視爲相同的旋轉位置（因爲它們是）並計算出不需要進行轉換。將360deg更改爲359，並且應該修復它 –

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

來源

2012-09-07 06:50:07

好戲！現在它適用於Firefox，Chrome和Safari。 :) – nlawson

iOS5上的CSS3無限旋轉動畫

回答

相關問題