CSS轉換和瀏覽器標籤

我有保持與CSS旋轉過渡無限期地旋轉了一圈，以保持它無限期地旋轉我使用jQuery的不斷變化的旋轉值每30秒以更大的價值。我發現這比整個CSS解決方案在視覺上更流暢。

但我注意到，css轉換的行爲如下：即使未完成轉換，當window> tab> page>元素具有另一個選項卡或者窗口最小化時，它也會停止。

所以jquery會繼續，但轉換停止，使得轉速增加。停止jquery函數增加旋轉時，標籤沒有聚焦有助於，但不能完全解決問題，因爲在元素是「可見」，但標籤沒有聚焦的情況下（想想打開的標籤，但另一個程序在上面是活動的瀏覽器或瀏覽器的另一個窗口打開，也許在一個圖塊中）轉換繼續進行，但jquery計時器停止，最終使圓圈停止。

來源

2013-04-12 untore

你爲什麼要用這個過渡？

#yourElement { 
    animation:spin 10s linear; 
    -webkit-animation:spin 10s linear; 
} 
@keyframes spin { 
    from {transform:none} 
    to {transform:rotate(360deg)} 
} 
@-webkit-keyframes spin { 
    from {-webkit-transform:none} 
    to {-webkit-transform:rotate(360deg)} 
}

即使使用標籤開關，也可以平滑無瑕地進行動畫製作。

來源

2013-04-12 14:31:54

這很好，但是如果您想要旋轉已經具有默認旋轉的元素，則必須爲每個具有不同{}值的元素創建動畫。 – untore

也許你可以使用後臺任務來刷新CSS。看看這個帖子：Execute Background Task In Javascript

來源

2013-04-12 14:31:47 David

CSS轉換和瀏覽器標籤

回答

相關問題