CSS與jQuery的動畫(animation)比較

jQuery與CSS都能實現對網頁上的DOM進行動畫特效，但兩者有一些差異，特別在這邊紀錄：

jQuery的動畫：

1. 可使用$(selector).animate(styles,speed,easing,callback)來進行動畫，為有數字參數的css屬性進行動畫(無法用於只有字串值的css屬性，例如background-color:red)。
2. 可使用$(selector).stop(stopAll,goToEnd)來停止動畫，可以只停止當前動畫並繼續 queue中的其他動畫。也可以停止當前動畫並情空動畫列隊(只限queue中的animation列隊成員)(參見queue)，此時可以選擇直接將元素(DOM element)的動畫效果跳至當前動畫的最後狀態。
3. 沒有暫停的方法(pause)，即無法中途暫停，之後再從暫停的地方播放剩餘的動畫(resume)。目前要有pasue、resume的方法只能用plug-in等的方式解決，這裡有一些還沒試過的plug-in可以參考： Pause、jQuery-FxQueues。
4. 動畫結束後並不會引發animation事件。

CSS的動畫

1. 為DOM element加上附有動畫屬性的CSS來實現動畫。
2. 在CSS中使用animation-name屬性來指定keyframes (參見CSS3 Animations)。故無法同時在同一個DOM element上指定兩個animation-name的CSS屬性，會被最後決定的屬性覆蓋過去，即一次只能一個動畫。
3. 可以設定許多不同的屬性來達到不同的效果。例如用animation-iteration-count來設定重覆次數
4. 可以使用animation-play-state來設定運行(running)、暫停(paused)，pased及running可以互相切換，動畫不會被停止無法繼續播(即paused之後再running等同resume效果)。
5. 動畫播放完以後nimation-play-state會被設為paused。
6. 動畫無法停止
7. animation-timing-function可以設定時間與output效果的關係(參見<timing-function>)，常用的有可以用來做逐幀動畫的steps(number_of_steps, direction)，作用為設定output效果為步進函數(step function)，number_of_steps代表切割動畫(動畫指瀏覽器算出來的漸進動畫output效果)為幾幀，direction代表步進的不連續點為每幀的start處還是end處(參見<timing-function>、CSS3 timing-function: steps() 詳解、小tip: CSS3 animation漸進實現點點點等待提示效果)。
8. 動畫結束後發出animationend事件，可用JavaScript的addEventListener('animationend',callbackFunction)或jQuery的bind('animationend',callbackFuncion)來獲取事件，但是如果動畫class被移除或animation-play-state被設成paused並不會引發animationend事件。