背景大小的封面使css3動畫波濤洶涌

我有一個圖像的網格，我想用css3頂部動畫。它工作，直到我把背景大小：封面上網。動畫變得波濤洶涌。我做錯了什麼，或者我能做些什麼來防止這種情況發生？背景大小的封面使css3動畫波濤洶涌

當我使用jQuery的動畫功能，它變得更糟。

我還發現類似於： -webkit-backface-visibility：hidden; 但這並不能解決問題。

body{ 
    overflow: hidden; 
    margin: 0; 
    padding: 0; 
    background: #ccc; 
} 

div.container.animate{ 
    top:-100%; 
} 
div.container{ 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    top: 0; 
    left: 0; 
    -webkit-transition: top 1s ease-in-out; 
    -moz-transition: top 1s ease-in-out; 
    -o-transition: top 1s ease-in-out; 
    -ms-transition: top 1s ease-in-out; 
    transition: top 1s ease-in-out; 

} 

ul{ 
    display: block; 
    padding: 0; 
    margin: 0; 
} 

li{ 
    width: 25%;; 
    float: left; 
    height: 160px; 
    background-size: cover; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
}

來源

2013-05-13 Atticweb

什麼計算機您使用的？你在哪個瀏覽器中測試過它？這可能是一個計算機性能問題。對我來說它工作得很好，但我有一臺功能強大的機器。看看這個也是：http://stackoverflow.com/questions/8600635/jquery-animations-choppy-after-using-css3-transitions – Tbi45 2013-05-13 09:48:04

我有一個非常強大的電腦，我使用鉻。我確實看到這個例子比實際的網站更流暢。也許是因爲真實的網站是全屏。但是，當我刪除背景大小規則時，我確實看到了差異。 – Atticweb 2013-05-13 09:53:08

我仍然認爲存在性能問題。動畫將重新定位每個圖像的每個像素。所以這對於瀏覽器渲染會有點沉重，更不用說如果你說原始變體是全屏的話，圖像就很大。看到這個問題也許它有幫助（遵循性能問題）。 http://stackoverflow.com/questions/7866423/css3-animations-and-performance-are-there-any-benchmarks。 – Tbi45 2013-05-13 10:05:32

沒有什麼不對您的JavaScript中，存在的問題奠定了在CSS。頂部，右側，底部和左側的動畫是硬件加速的。這很糟糕，因爲它可以在CPU上運行，而不是在GPU上運行。當你看到一個生澀的轉換時，你可以打賭你不是硬件加速的。所以，你應該使用硬件加速。

而不是動畫的頂部，你應該動畫變換（x，y，z）。這將使硬件加速。

所以你必須改變下面的CSS：

div.container.animate{ 
    top:-100%; 
} 

div.container{ 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    top: 0; 
    left: 0; 
    -webkit-transition: top 1s ease-in-out; 
    -moz-transition: top 1s ease-in-out; 
    -o-transition: top 1s ease-in-out; 
    -ms-transition: top 1s ease-in-out; 
    transition: top 1s ease-in-out; 
}

進入這個：

div.container{ 
    float: left; 
    width: 100%; 
    height: 100%; 

    -webkit-transform: translate3d(0, 0%, 0); 
     -moz-transform: translate3d(0, 0%, 0); 
     -ms-transform: translate3d(0, 0%, 0); 
     -o-transform: translate3d(0, 0%, 0); 
      transform: translate3d(0, 0%, 0); 

    -webkit-transition: all 1s ease-in-out; 
     -moz-transition: all 1s ease-in-out; 
     -o-transition: all 1s ease-in-out; 
     -ms-transition: all 1s ease-in-out; 
      transition: all 1s ease-in-out; 
} 

div.container.animate{ 
    -webkit-transform: translate3d(0, -100%, 0); 
     -moz-transform: translate3d(0, -100%, 0); 
     -ms-transform: translate3d(0, -100%, 0); 
     -o-transform: translate3d(0, -100%, 0); 
      transform: translate3d(0, -100%, 0); 
}

這裏是活鏈接：http://jsfiddle.net/PqdVZ/1/

來源

2013-05-13 10:37:33

背景大小的封面使css3動畫波濤洶涌

回答

相關問題