導致JavaScript效率低的兩大原因：操作DOM和使用頁面動畫。
通常我們會通過頻繁的操作 DOM的css來實現視覺上的動畫效果，導致js效率低的兩個因素都包括在內了在頻繁的操作DOM和css時，瀏覽器會不停的執行重排和重繪，在PC版本的瀏覽器中，因為瀏覽器可用的內存比較大，用戶肉眼幾乎看不見頁面動畫產生的repaint和reflow，所以工程師幾乎無需過多的考慮動畫帶來的性能問題，但在移動設備上可大有不同，移動設備分配給內置瀏覽器的內存可沒有PC版本的瀏覽器內存可觀，目前對CSS3支持最好的莫過於webkit瀏覽器了，在webkit內核的瀏覽器，一是safari其次是chrome.
用CSS3動畫替代js模擬動畫的好處：
- 不占用JS主線程；
- 可以利用硬件加速；
- 瀏覽器可對動畫做優化（元素不可見時不動畫減少對FPS影響）
CSS3動畫提供了2D和3D以及常規動畫屬性接口，它可以工作在頁面的任何一個元素的任意一個屬性，CSS3的動畫是利用C語言編寫的，它是系統層面的動畫。
采用js動畫還是css3動畫，需要開發者根據不同的需求做出不同的抉擇，但應該遵循一個基本的原則是：如果你需要做2D動畫，請勿必使用CSS3的transition或animation
CSS3動畫與JavaScript模擬動畫有以下區別：
-
CSS 3D動畫在js中無法實現
CSS3的3D動畫是CSS3中非常強大的功能，因為它的工作原理是在一個三維的空間里，因此js是無法模擬出像CSS3那樣的3D動畫 -
CSS 2D矩陣動畫效率高於js利用margin和left,top模擬的矩陣動畫
CSS3的2D動畫是指是2D矩陣Transform變化，js當然是不能做變形動畫的。就拿坐標動畫來說，使用CSS3的transform做translateXY動畫比js中的position left，position right快了近700mm!而且視覺上也比js動畫流暢很多。 -
CSS3其它常規動畫屬性的效率均低於js模擬的動畫
常規動畫屬性在這里是指：height，width,opacity,border-width,color
css3的屬性
2D 轉換
CSS3 轉換可以可以對元素進行移動、縮放、轉動、拉長或拉伸。
transform屬性，適用於2D或3D轉換的元素
transform-origin屬性，設置轉化元素位置
1.translate()方法，根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。
div {
transform: translate(50px,100px); -webkit-transform: translate(50px,100px); /* Safari and Chrome */ }2.rotate()方法，在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。
div {
transform: rotate(30deg); -webkit-transform: rotate(30deg); /* Safari and Chrome */ }3.scale()方法，該元素增加或減少的大小，取決於寬度（X軸）和高度（Y軸）的參數
div { -webkit-transform: scale(2,3); /* Safari / transform: scale(2,3); / 標准語法 */ }4.skew( [,])包含兩個參數值，分別表示X軸和Y軸傾斜的角度，如果第二個參數為空，則默認為0，參數為負表示向相反方向傾斜。
div { transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 / -webkit-transform: skew(30deg,20deg); / Safari and Chrome */ }
3D 轉換
translate3d(x,y,z) 定義 3D 轉化。
translateX(x) 定義 3D 轉化，僅使用用於 X 軸的值。
translateY(y) 定義 3D 轉化，僅使用用於 Y 軸的值。
translateZ(z) 定義 3D 轉化，僅使用用於 Z 軸的值。
scale3d(x,y,z) 定義 3D 縮放轉換。
scaleX(x) 定義 3D 縮放轉換，通過給定一個 X 軸的值。
scaleY(y) 定義 3D 縮放轉換，通過給定一個 Y 軸的值。
scaleZ(z) 定義 3D 縮放轉換，通過給定一個 Z 軸的值。
rotate3d(x,y,z,angle) 定義 3D 旋轉。
rotateX(angle) 定義沿 X 軸的 3D 旋轉。
rotateY(angle) 定義沿 Y 軸的 3D 旋轉。
rotateZ(angle) 定義沿 Z 軸的 3D 旋轉。
perspective(n) 定義 3D 轉換元素的透視視圖。佛山vi設計https://www.houdianzi.com/fsvi/ 豌豆資源搜索大全https://55wd.com
CSS3 過渡
transition 簡寫屬性，用於在一個屬性中設置四個過渡屬性。
transition-property 規定應用過渡的 CSS 屬性的名稱。
transition-duration 定義過渡效果花費的時間。默認是 0。transition-duration: 5s; transition-timing-function 規定過渡效果的時間曲線。默認是 "ease"。 linear 規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）。 ease 規定慢速開始，然后變快，然后慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 ease-in 規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）。 ease-out 規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）。 ease-in-out 規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。 transition-delay 規定過渡效果何時開始。默認是 0。transition-delay: 2s;CSS3 動畫
@keyframes 規定動畫。 animation 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。 animation-name 規定 @keyframes 動畫的名稱。 animation-duration 規定動畫完成一