我們為頁面設定動畫時，往往會用到transition還有animation以及transfrom屬性或者用到js。
其實通常情況下，對於使用js我們更加傾向於使用css來設定動畫。
transfrom就不用說了，它本身就乙個css屬性。
transition 是可以為乙個或者多個用數值表示的css屬性發生變化時新增動畫效果。
.demo
.aaa
.demo:hover .aaa
相對於animation,transition從某種層度上講，動畫控制的更粗一些，它唯一能定義動畫變化過程效果的便是transition-timing-function屬性，
而animation提供的keyframe方法，可以讓你手動去指定每個階段的屬性。此外animation還封裝了迴圈次數，動畫延遲，反向迴圈等功能,更加自由和強大。
property去設定過渡效果的屬性名稱，
duration設定過渡效果的週期，
timing-function規定速度效果的速度曲線，
delay設定過渡效果什麼時候開始；
1、transition 是過渡，是樣式值的變化的過程，只有開始和結束；animation 其實也叫關鍵幀，通過和 keyframe 結合可以設定中間幀的乙個狀態；
2、animation 配合 @keyframe 可以不觸發時間就觸發這個過程，而 transition 需要通過 hover 或者 js 事件來配合觸發；
3、animation 可以設定很多的屬性，比如迴圈次數，動畫結束的狀態等等，transition 只能觸發一次；
4、animation 可以結合 keyframe 設定每一幀，但是 transition 只有兩幀；
5、在效能方面：瀏覽器有乙個主線程和排版執行緒；主線程一般是對 js 執行的、頁面布局、生成位圖等等，然後把生成好的點陣圖傳遞給排版執行緒，而排版執行緒會通過 gpu 將位圖繪製到頁面上，也會向主線程請求位圖等等；我們在用使用 aniamtion 的時候這樣就可以改變很多屬性，像我們改變了 width、height、postion 等等這些改變文件流的屬性的時候就會引起，頁面的回流和重繪，對效能影響就比較大，但是我們用 transition 的時候一般會結合 tansfrom 來進行旋轉和縮放等不會生成新的點陣圖，當然也就不會引起頁面的重排了；
過度Transition與transform 轉換
過度transition css的transition允許css的屬性值在一定的時間區間內平滑的過渡 語法格式 transition 屬性名 時間 速度曲線 何時開始 transition width 2s ease in 2s webkit transition width 2s ease in ...
Framework的anim下各xml簡介
默默珍藏 屬性 型別 功能備註 duration long 屬性為動畫持續時間 時間以毫秒為單位 fillafter boolean 當設定為true 該動畫轉化在動畫結束後被應用 fillbefore boolean 當設定為true 該動畫轉化在動畫開始前被應用 interpolator 指定乙...
animition和transition的配合
button first click function 10000 新增乙個class slowwalk 裡面用到了animation，用於切換人物畫面，形成動畫 slowwalk webkit keyframes person slow 25 50 75 100 同時用transition讓人物走...