在工作中，經常需要用不同的技術實現動畫。於是，想總結一下這三種實現方式的異同，以便以後面對不同的動畫需求，可以快速選擇出適合的動畫技術。因為是菜鳥，如果有總結不對或不到位的地方，請大神不吝賜教。 animate是jquery中的一個函式，animation和transition是css3的屬性。相容性上來說，jquery會更好。效能上來說，css3會更高。

1 語法

(selector).animate({styles},speed,easing,callback); transition: property duration timing-function delay; animation

2 主要應用場景

animate：分步驟的動畫（因為animate引數中有一個回撥函式）。 transition：執行一次，動畫狀態停在終點的動畫。 animation：自動執行，重複執行多次的動畫，類似gif。

3 是否保留在最後一幀的屬性值

animation預設不保留（但可以通過forward屬性值設定為保留） 在不需要保留最後一幀的屬性值的時候： animate通過手動清空行內css樣式，達到不保留屬性的效果； transition通過手動刪除樣式類，達到不保留屬性的效果。 注意：animate實現動畫的實質是修改行內css樣式。

4 非數字屬性值是否可以建立動畫

animate不可以。

5 是否可以設定動畫次數

animate和transition不可以。（設定定時器也是可以實現）

6 是否可以自動觸發

animate和transition不可以。

7 是否可以往返執行動畫

animate不可以。transition通過在動畫初始的樣式中設定，來實現往返都有動畫效果。

8 是否可以實現有步驟的動畫

都可以。animation和transition可以通過延遲事件實現。

9 位移動畫設定思路

animate通過margin設定位移。 animation和transition通過translate設定位移。

10 transition只對原本寫了的屬性產生效果