CSS animation 與 CSS transition 有何區別？

01-05

https://developer.mozilla.org/en/CSS/CSS_animations
https://developer.mozilla.org/en/css/css_transitions

transition關注的是CSS property的變化，property值和時間的關係是一個三次貝塞爾曲線。

animation作用於元素本身而不是樣式屬性，可以使用關鍵幀的概念，應該說可以實現更自由的動畫效果。

至於實現動畫效果用哪一種，我的感覺是要看應用場景，但很多情況下transition更簡單實用些。

Transition 強調過渡，Transition ＋ Transform ＝兩個關鍵幀的Animation

Animation 強調流程與控制，Duration ＋ TransformLib ＋ Control ＝多個關鍵幀的Animation

如果只有兩個關鍵幀我會選擇Transition ＋ Transform

複雜動畫就要考慮把變換寫成TranformLib以Class方式調用，Control與Duration寫到AppClass

說明：Transform指所有CSS屬性變換，TransformLib指所有Animate創建的變換，Control包括動畫次數，關鍵幀與時間的設定等。著名的Animate.css就是把過渡，變換，控制三個分離，構成可以復用動畫庫。我剛開始也很鬱悶，為什麼要搞兩個動畫屬性。其實是有區別的，至於兩種屬性有功能重疊的部分就根據喜好來選擇啦。

transition 是令一個或多個可以用數值表示的css屬性值發生變化時產生過渡效果。

animation 則是屬於關鍵幀動畫的範疇，它本身被用來替代一些純粹表現的javascript代碼而實現動畫。基於animation和@keyframe 的動畫一方面也是為了實現表現與行為的分離，另一方面也使得前端設計師可以專註得進行動畫開發而不是冗餘的代碼中。同時，它還應該被用來提高動畫的渲染性能，當然，渲染性能這是瀏覽器的事情，目前看來，三大主流內核的animation/@keyframe的性能都不算高。webkit甚至在元素被transform矩陣變化並脫離文檔流後在某些偽類選擇器里應用還會有bug。

事實上，animation結合@keyframe可以做的事情遠超現在你看到的。我斷言，在未來某個css3動畫充分發展的時候，它和transition的應用場景和區別將會越來越明顯，並且它將會代替絕大多數純展示的js/flash動畫。

其實整體來看，animation 和transition想做的事情都是一樣，通過控制屬性變化的過程，也實現動畫。都是立足於控制本身dom的css屬性變化過程，來實現動畫的視覺效果。而你看transform就不同，本身一個css屬性。

區別就是，兩者的控制粒度不一樣。某種程度上，transition更加粗一點，比如過渡的速度進行了封裝，可以控制是勻速改變還是貝塞爾曲線之類的。而animation提供的keyframe方法，可以讓你手動去指定每個階段的屬性。此外animation還封裝了循環次數，動畫延遲等功能，根據自由和強大。

中天天說，就是上面一些總結的很好內容，簡單的情況選用transition，自由一點或者複雜的可以用animation。

transition從:hover延伸出來

animation從flash延伸出來

transition 中文為過渡，顧名思義也就是樣式值的一個變化過程。animation 中文為動畫，其實也就是關鍵幀，animation 和@keyframe結合使用。提到動畫不得不提的就是動畫性能問題。因為現在移動端設備的差距，高耗的性能會給用戶帶來不好的體念，動畫在性能優化方面就尤其重要了。

先來簡單說下瀏覽器的運行。瀏覽器有一個主線程和一個排版線程。主線程一般是對js運行，頁面布局，生成點陣圖之類的工作，然後會把生成好的點陣圖傳遞給排版線程，而排版線程會通過GPU將點陣圖繪製到頁面上，也會向主線程請求點陣圖等等工作。對於我們現在這個動畫而言了解這些也就可以了。

從大的兩個方向也就是生成點陣圖，然後將點陣圖程序在頁面上。而前者消耗性能，而且速度相對後者要慢。所以我們在動畫過程中，盡量減少點陣圖的生成。當我們改變元素的width,height,position等屬性的時候就會引起點陣圖的生成，重排等。而我們在使用transform中的旋轉，縮放等時就不會生成新的點陣圖，當然也不會引起頁面的重排。這樣就大大提高了性能。沒時間了，最後一句話，如果還想提高性能，可以使用will-change,進行硬體加速，當然這個不能濫用，不然會增加GPU的負擔。

前面提到的都不再重複了，我認為觸發兩種效果的條件不同：

對於transition而言，不管是動態設置的還是非動態設置的過渡效果，只要過渡效果指定的屬性值發生了變化就會觸發過渡效果。

對於animation而言，如果是非動態設置的，那麼頁面載入完後（具體是頁面載入完還是元素渲染完後觸發，沒研究）就會觸發動畫效果；如果是動態設置的，那麼設置完後（假設沒有設置 delay）就會觸發動畫效果。後面再改變屬性值也不會觸發動畫效果了，除了一種情況（這種情況不會觸發transition定義的過渡效果），就是元素從 display:none 狀態變成非 display:none 狀態時，也會觸發動畫效果。

以上只為個人觀點，歡迎大家指正和補充！

最近遇到的問題吧，在極端情況下，animation比transition更佔資源，導致前端壓力過大時animation的關鍵幀動畫無法很好的展現出來，而transition佔用的資源更少，當然效果也沒有animation好，所以我的建議是能用transition完成的動畫盡量用transition，追求更好更複雜的效果的話建議animation。

GPU實際上可以看作一個獨立的計算機，它有自己的處理器和存儲器及數據處理模型。當瀏覽器向GPU發送消息的時候，就像向一個外部設備發送消息。

你可以把瀏覽器向GPU發送數據的過程，與使用ajax向伺服器發送消息非常類似。想一下，你用ajax向伺服器發送數據，伺服器是不會直接接受瀏覽器的存儲的信息的。你需要收集頁面上的數據，把它們放進一個載體裡面（例如JSON），然後發送數據到遠程伺服器。

同樣的，瀏覽器向GPU發送數據也需要先創建一個載體；只不過GPU距離CPU很近，不會像遠程伺服器那樣可能幾千里那麼遠。但是對於遠程伺服器，2秒的延遲是可以接受的；但是對於GPU，幾毫秒的延遲都會造成動畫的卡頓。【看薦黑板報】