animation 可以用 name 設置動畫的名稱，用 duration 設置動畫完成的周期，用 timing-function 設置動畫的速度曲線，delay 設置動畫什么時候開始，iteration-count 設置動畫播放的次數，direction 規定下一個周期是否逆向的播放，play-state 動畫是否正在進行或者暫停，fill-mode 設置動畫停了之后位置什么狀態
transition 用 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 來進行旋轉和縮放等不會生成新的位圖，當然也就不會引起頁面的重排了；