移動頁面請使用CSS3動畫

標籤：style   io   使用   sp   on   問題   bs   時間   line   

說到動畫，我們一般會使用jQuery 中的animate();

在PC瀏覽器中，是很方便的，由於PC的高效能，這種不斷修改DOM的做法確實不會出現太大的問題，但是在手機端就不同了。

手機上使用jQuery 或 Zepto中的animate還是會帶來一些小的卡頓。

手機平台雖然硬體效能稍微差一些，但是webkit核心有著很大的佔有率。

像簡單的修改某一個CSS屬性的事可以交給transition去做（加首碼），用transition監控的屬性，只要修改了值，就會自動按照設定好的時間完成過度，注意這種過度是由瀏覽器渲染引擎完成的，不會引起re-flow和re-draw 所以看起來比較流暢。

 

而複雜的動畫就要交給CSS3中的animation（有首碼）和@keyframes 來完成。

設定每個時間點的式樣，就會想老式動畫片一樣了。

 

移動頁面請使用CSS3動畫