IPad Safari CSS3動畫計時錯誤

關於Ipad Safari（可能在Mac Safari上，但我沒有MAC測試）... 當我第一次加載頁面，或者在我點擊刷新後，CSS3動畫時機將會非常古怪。它每次都是隨機的，但總是會有一個令人驚喜的邊緣，讓動畫出乎意料。IPad Safari CSS3動畫計時錯誤

這裏的怪異的一部分...

如果我回到主屏幕並重新打開Safari瀏覽器，或者如果我切換到另一個選項卡，然後再返回。動畫時間是完全固定的。所以我知道這不是代碼本身的問題。我試過等待開始動畫，直到頁面加載後，強制重畫屏幕，但沒有任何更改所描述的行爲。

看起來這個問題的種類得到了很大的回答，但如果有人願意幫助，我可以提供一個鏈接。

來源

2014-11-22 user2782001

還沒有弄明白。但是你可以使用這個鏈接來測試...... www.timothytown.com/tims_portoflio/examples5.php – user2782001 2014-11-22 15:20:11

答案：

想通了。從IOS 8.1 Safari開始，如果CSS3動畫混合了正面和負面-webkit-animation-delay屬性，則會有一個錯誤。

例如

#no-delay{ 
    -webkit-animation:myAnim 2s infinite; 

} 
#one-second-delay{ 
-webkit-animation:myAnim 2s infinite; 
-webkit-animation-delay:-1s; 
} 
@-webkit-keyframes myAnim{ 
    0%{ 
    //some property 
    } 
100%{ 
     //some property 
    } 
}

將不能正確定時初始加載（雖然在離開該網頁視圖，並返回時，將糾正問題，仍然不知道爲什麼是這樣的情況）。

解決的辦法是爲需要同步的所有動畫添加延遲，並確保所有延遲都爲正或負。對於上述css的修復將是...

#no-delay{ 
    -webkit-animation:myAnim 2s infinite; 
    -webkit-animation-delay:-1s;//this also needs a negative delay to synch on IOS :(
} 
#one-second-delay{ 
-webkit-animation:myAnim 2s infinite; 
-webkit-animation-delay:-2s; 
} 
@-webkit-keyframes myAnim{ 
    0%{ 
    //some property 
    } 
100%{ 
     //some property 
    } 
}

來源

2014-11-22 18:14:28 user2782001

IPad Safari CSS3動畫計時錯誤

回答

相關問題