css3 動畫 vs js 動畫

以前被問到過，css3 動畫與 js 動畫孰優孰劣，腦殼的第一反應就是性能上確定 css3 動畫會好不少，但別人說不對，我就在想，不對？難道還有別的緣由嗎？答案是確定的。先來看看兩者實現動畫的原理吧。

css3 動畫原理

css3 動畫本質上是一直視覺上的動畫，並未去觸碰 DOM，換句話說，用 css3 實現的動畫，原來的 DOM 的位置是未曾被改變的。

js 動畫原理

js 動畫是經過控制 DOM 的位置，來達到動的效果，是 DOM 一點點位移的結果，每一次的位移都要等待上一次的位移結束，並且由於頻繁的操做 DOM，會帶來頻繁的重繪，因此會出現卡頓的現象。

孰優孰劣？

經過上面的分析，咱們知道 css3 相比 js 實現的動畫，會更流暢。咱們還知道，過多的 js 腳本，頁面的加載速度會受到影響，因此這在必定程度上確定會影響到頁面的性能。所以，推薦使用 css3 動畫，而不建議使用 js 動畫。