CSS @keyframes動畫閃爍

如何修復@-webkit-keyframes動畫在其迭代結束時閃爍？CSS @keyframes動畫閃爍

它是在Android 2上CSS3動畫transform值translate，translate3d和opacity非常顯着。

您可能會注意到在一些職位的建議與修復：

-webkit-transform: translate3d(0,0,0);

或

-webkit-perspective: 1000; 
-webkit-backface-visibility: hidden;

但測試它在Android 2.3之後，我發現比他們的非真正解決問題。

來源

2012-07-11 Binyamin

喬治·赫斯發表在自己的博客爲它working fix，提的是：

閃爍由動畫重置開始 keframe只是一瞬間造成的。即使您已將動畫CSS類樣式化爲以保留它的位置，並在完成動畫時繼承關鍵幀的最後樣式，也會發生這種情況。 I 可能提出的唯一解決方案是使用2個以上的關鍵幀。

例如，如果下面的代碼閃爍：

@-webkit-keyframes 'slide-in' { 
    from { -webkit-transform: translateX(100%); } 
    to { -webkit-transform: translateX(0); } 
}

其更改爲以下將解決這個問題

@-webkit-keyframes 'slide-in' { 
    from { -webkit-transform: translateX(100%); } 
    99% { -webkit-transform: translateX(0); } 
    to {} /* equals `100% {}` Leave it empty to fix the flicker */ 
}

結論：留空（不設置參數）動畫持續時間結束to {}/100% {}並且在動畫參數的設置結束旁邊99% {}或者duratio ñ。

來源

2012-07-11 09:27:55 Binyamin

我無法得到@ Binyamin的解決方案，但設法解決這個問題，同時調試另一個，只需加入-webkit-animation-fill-mode: forwards;

來源

2014-05-09 13:55:12 b4tch

CSS @keyframes動畫閃爍

回答

相關問題