I'm working on a page turn animation。表現令人失望。特別是如果您採用pages課程並將其設置爲800px寬（將$('.pages').css({width: '960px', height: '600px'});粘貼到控制檯中）。我曾經有大約16次過渡，並將其減少到9次，其中很多都是變換！我不知道我還能做什麼。CSS轉換，動畫有可怕的表現，行爲
Chrome似乎沒有使用GPU。它尖峯初始頁面打開FPS但隨後定期（與about:flags啓用此）逢低下來：
嘗試一下在Safari中，您將得到更好的性能，但看到動畫不同步經常落後於對方，並且在同一個瀏覽器中有一個奇怪的搖擺（我還沒有使它在Fx中工作）。
關於如何優化網頁上的CSS過渡和動畫並沒有太多好的材料，我一直主要是在教我自己。我希望有人會有這樣的建議。
這裏是我們推出Sencha Animator的a page flip I did。它的靈感來自Ramon Cortes的原創，但使用了不同的機制 - 就我所記得的那樣。它在Safari和iOS上非常流暢，但在Chrome桌面上卻有點不舒服。儘管如此，還沒有在Android 4中進行過檢查。
爲了充分利用GPU，您必須在-webkit-tranform中使用translate3d(x,y,z)而不是translate(x,y)。這將迫使Chrome瀏覽器使用GPU來渲染動畫。
請注意，雖然如果電腦具有良好的視頻卡，性能將大大提高，但它在較慢的硬件上也會降級。
謝謝，我在Chrome/MacOS上試過translate3d，當我有12頁有點複雜的DOM結構時，它非常慢。整個頁面放緩之前，我甚至動畫什麼！所以不幸的是，我無法想出一個辦法，讓它在加速另一個平臺的同時不會癱瘓一個平臺。 –
我在OSX上使用Chrome 17，它似乎很好 - 運行在20-30fps左右，沒有傾斜或圖形問題。我懷疑這只是舊版Chrome版本的一個問題。
最新測試版的確有巨大的性能提升。謝謝。 –
動畫盒陰影和-webkit-gradients非常昂貴，請嘗試暫時刪除它們以查看它是否會提高性能。如果確實如此，請參閱您可以使用圖像替換它們。
不錯，我將不得不研究這項技術，因爲Safari似乎更喜歡它。但是，Mac上的Chrome使用隨機大小的像素變成黑色或隨機顯示下面的圖層。 –
是的，很顯然，Chrome 15（？）的webkit版本存在一個bug，即在添加變換時隱式z順序會變得混亂。我打算用明確的z-index設置來處理一個版本，看看它是否修復了一些問題。 –
我剛剛想出瞭如果添加'-webkit-transform-style：preserve-3d'，它不會像那樣閃爍。儘管如此，我仍然得到一些裁剪。 –