使用jQuery fadeIn或CSS3動畫更好嗎？

我正在使用一些PHP和JavaScript創建一個簡單的圖庫，並試圖在圖像之間進行淡入淡出。然後我想知道在使用CSS動畫之間是否存在性能差異，例如：使用jQuery fadeIn或CSS3動畫更好嗎？

@-webkit-keyframes fadeIn { 
0% { opacity: 0; } 
100% { opacity: 1; } 
}

和jQuery fadeIn。

我想從fadeIn使用回調，但我也可以只使用CSS的計時器我猜。

這兩種方式中的哪一種可能對於大圖像效果更好？我看不出有什麼不同，但想知道它是否會影響較慢的電腦。

來源

2012-06-02 John P

爲了獲得更好的跨瀏覽器兼容性，請考慮使用此代碼的前綴和「-moz」等版本。 – user2428118

當然，我只是在這裏使用webkit來縮短這篇文章中的代碼。感謝您的提醒; p –

@mgraph - jQuery可能支持IE的淡入淡出，但很多時候它看起來很糟糕，因爲不管jQuery有多好，它都無法隱藏IE的基本限制。 – Spudley

如果一個回退到另一個呢？儘可能使用CSS3轉換，並使用Modernizr等功能檢測庫來確定用戶的瀏覽器是否支持CSS3轉換。

如果並且只有當用戶的瀏覽器不支持本地動畫時，才應該使用jQuery。

原生動畫是GPU加速的，導致對CPU的限制更少，動畫更流暢。另外，IT不需要JavaScript，也不需要額外的請求就可以完成。

來源

2012-06-03 06:29:20

+1作出必須提出的論點。 – hakre

如果瀏覽器不支持本地動畫，那麼根本就不會動畫，因爲它們看起來像廢話:) – Esailija

4個答案和3個小於-4？！我會說這是一個非常好的問題！ – Shahbaz

嗯，我認爲在支持瀏覽器的情況下使用CSS動畫會更好，並且應該只將jQuery用作不支持的瀏覽器的備份。正如在http://dev.opera.com/articles/view/css3-vs-jquery-animations上詳細解釋的那樣，他們在CSS和jQuery的同時進行了300個div的動畫測試，並注意到性能統計之間的巨大差異。使用CSS

統計動畫爲：

統計使用jQuery的爲：

因此，當你可以看到，表現有很大的差異。這是因爲瀏覽器的CSS處理器是用C++編寫的，本地代碼執行速度非常快，而jQuery（JavaScript）是一種解釋型語言，瀏覽器無法很好地預測JavaScript，就接下來會發生什麼事情而言，限制瀏覽器對其性能進行優化。我希望能回答你的問題。

來源

2013-10-04 20:24:07

使用jQuery fadeIn或CSS3動畫更好嗎？

回答

相關問題