儘管我在互聯網上搜索有關這方面的信息，但我找不到關於它的任何東西，所以我來這裏尋求幫助。爲什麼[我的] CSS3/jQuery過渡不平滑，我該如何讓它們更平滑？
所以這裏有一個項目，我已經工作的精華版本：
http://sachasayan.com/test/index.html（查看在WebKit瀏覽器，請有沒有時間，使其FF-友好。）
還有什麼讓我煩惱：無論我使用哪種方法 - jQuery .animate或css3過渡，[我的]動畫看起來都不太平滑。我不明白他們爲什麼首先出現這種方式，而且非常微妙，我最終不得不做一些視頻上限來證明它。但它絕對存在 - 動畫是突出的。有時框架發生得太快，有時太慢。
翻轉它來回六七次，你會希望看到我在說什麼。
我可以理解這與jQuery - JS執行不完美。快速剖析表明，確實，使用jQuery anim時，某些幀會被觸發得太快，並且某些幀會遲到。但與CSS3？
人們做什麼來解決這個問題？
設置你的代碼之前這個JS：
jQuery.fx.interval = 100;
我試過了 - 還有，這兩個都不是幀速率問題（這是一個一致性問題 - 儘管幀速率的增加可以減少對一致性問題的理解，但是我發現它並不能真正幫助解決這個問題）由於某種原因）也不僅僅是一個jQuery問題。 – WittyBanter 2012-01-07 02:39:09
你有沒有讀過關於動畫DOM的許多建議？ – powtac 2012-01-07 02:43:32
這是我的一個小項目的原型，並與你相似：
http://www.megaupload.com/?d=U77EATKF
我正在使用jQuery的「margin-left」CSS屬性和.animate來移動容器，並且非常流暢。使用箭頭鍵使用它（左和右）
該項目的當前版本其現在充滿圖像，文本，iframe並仍然平滑。
祝你好運。
因此，這有助於稍微，但只是因爲你使用EaseInOutExpo，這有點掩蓋了效果。使用像默認擺動或EaseInOutQuart（我的偏好）這樣的功能，並且在任何合理的「平均」機器上這些缺陷都更明顯。 – WittyBanter 2012-01-10 05:59:42
我在兩臺機器上進行了測試，當切換到EaseInOutQuart時，我看到了與您的代碼相同的效果 - 動畫不是非常流暢，雖然它們令人滿意，但它們並不完美*。我確信我已經看到了可以解決這個問題的網站，而不需要採用快速移動技巧。那麼他們如何做到這一點？ – WittyBanter 2012-01-10 06:05:58
告訴我一個人的網址，我會告訴你。 – 2012-01-10 06:34:15
如果它只能在Webkit上運行這種簡單類型的動畫，那麼代碼中存在一個錯誤。 – powtac 2012-01-07 02:24:18
該動畫在其他瀏覽器上運行良好 - 這是我沒有專門迎合FF的觸發。在你做這種快速判斷之前，我會問你實際看代碼（動畫函數只有幾行）。 – WittyBanter 2012-01-07 03:14:39
網頁的性能完全取決於您使用的瀏覽器，其版本，您使用的機器以及同時運行的內容。我同意@powtac，必須有一個錯誤，或者它只是你的代碼沒有優化。嘗試研究DOM操作如何影響性能，瀏覽器的JS基準，並嘗試研究瀏覽器本身以及它們的能力。 – Joseph 2012-01-07 04:13:08