為什麼要用css動畫替換js動畫

導致JavaScript效率低的兩大原因：操作DOM和使用頁面動畫。

用CSS3動畫替代JS模擬動畫的好處：

CSS3動畫提供了2D和3D以及常規動畫屬性介面，它可以工作在頁面的任何一個元素的任意一個屬性，CSS3的動畫是利用C語言編寫的，它是系統層面的動畫。

採用js動畫還是css3動畫，需要開發者根據不同的需求做出不同的抉擇，但應該遵循一個基本的原則是：如果你需要做2D動畫，請勿必使用CSS3的transition或animation

CSS3動畫與javascript模擬動畫有以下區別：

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 轉換元素的透視視圖。

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    規定動畫完成一個周期所花費的秒或毫秒。預設是 0。    
animation-timing-function    規定動畫的速度曲線。預設是 "ease"。    
animation-fill-mode    規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。    
animation-delay    　　規定動畫何時開始。預設是 0。    
animation-iteration-count    規定動畫被播放的次數。預設是 1。
animation-direction    規定動畫是否在下一周期逆向地播放。預設是 "normal"。
animation-play-state    規定動畫是否正在運行或暫停。預設是 "running"。