css3 transition屬性變化與animation動畫的相似性以及不同點

標籤：

下面列子中的2個圖片的效果。

http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html

第一個為transition屬性變化效果

第二個為animation動畫效果

是不是已經看出他們之間的相同與不同了吧。對的，他們都可以實現簡單的動畫效果，但transition變化效果當滑鼠離開動畫結束時，它還是會持續一段時間的動畫並最終返回為元素的初始樣式。animation動畫效果則不是，當滑鼠離開後它會之間立刻結束動畫效果。

還有一點區別：transition屬性變化時間點不易控制，只能見到的通過滑鼠經過或者js動態追加類名去對css屬性進行transition變化。animation動畫則可以控制變化時間的持續長度，延遲變化等。

css3 transition屬性變化與animation動畫的相似性以及不同點