使用CSS動畫的滯後和閃爍動畫

我正在處理交互式Web UI並且正在運行閃爍和滯後的動畫。使用CSS動畫的滯後和閃爍動畫

我幾乎完全使用CSS轉換，使用jQuery添加和刪除類來啓動/停止任何特定的動畫。我聽說這比使用jQuery動畫效果更好，但在使用Chrome（應用程序的預期瀏覽器）時，我仍然遇到閃爍和滯後的動畫。

看看這裏： lib.ncsu.edu/hunt_touchscreens/demo

這裏是我做的一個轉換的例子。這非常簡單，我沒有使用任何webkit，o等前綴。

#x { 
    opacity: 0; 
    transition: opacity .5s; 
}

我希望這個問題是不是太開放式的，但我很好奇的是這只是有很多不同的併發轉換的瀏覽器的限制，還是有避免這些性能問題的有效策略。

非常感謝您的任何建議。

我不認爲這太開放了，如果你給我們一點點繼續。你是否也可以發佈你的HTML和js，或者提供一個jsfiddle讓人們試着看看你在看什麼？ – akousmata

不幸的是，這樣做很困難，因爲這些問題只會在整個應用程序加載時出現，而且我無法將其縮小到簡潔的jsfiddle的特定問題。儘管如此，Pyloid有一個很好的答案。我想我只是使用太多的瀏覽器稅收過渡。謝謝閱讀！ –

這可能需要很多工作，但在您的網站上，您左右多了transition，並且會對瀏覽器徵稅，因爲它必須重新設置佈局，因爲它不僅需要計算移動的單個元素，它周圍的任何其他元素。

使用高性能css動畫的訣竅只能停留在瀏覽器速度非常快的幾個屬性上，尤其是當您的頁面過大時，像很多元素一次可能移動的頁面。

瞭解更多關於它here，但它的要點是利用下述性質，用於改變元件，

所以你需要重寫所有的「左」的位置變化某種形式的transform: translateX();，並考慮它如何影響網頁的其他元素，如果你想達到最佳性能。

2017-01-23 20:32:05 joeyfb

太棒了。感謝您的反饋。我認爲我的主要優勢在於應用將具有固定的屏幕大小，因此使用轉換可能不像普通的響應式網站那樣困難。 –

回答