Transition、Animation、Transform的分析比較

因為一直很困惑這三者的差異，所以整理了一篇比較，一起來看看吧～

名稱 | 介紹 | 作用於
------------- | -------------
Transition | 基礎的動畫效果，強調CSS屬性的過渡動畫 | CSS屬性變化
Animation | 細節複雜的動畫效果，強調CSS屬性的流程與控制，可加keyframes | CSS屬性變化
Transform | 控制html元素的旋轉、縮放、移動等等 | HTML元素(包含內容)變化

表格擠不下去，容許我分兩個表格QQ

名稱 |可否自行運作 | 效能問題
------------- | -------------
Transition |✗，需要事件或偽類別觸發 | 另一獨立執行緒處理，較不影響效能
Animation |✔，進入頁面可以直接運行|另一獨立執行緒處理，較不影響效能
Transform |✔，進入頁面可以直接運行|因會操作HTML元素運算，因此必須考慮效能

[補充]  還有一個容易搞混的字translaste，他只是transform的一個函數喔～(不懂看這裡)

總括來說

• animation可以說是包含很多個transition控制的屬性，transition是大略的CSS屬性變化，animation可以做出更細節的部分
• transform可以在animation中當作屬性被運用
• animation和transform可直接運行原因為都有指定屬性“值”的變換，而transition沒有

跳跳球CodePen連結

如果忘記了之前學的東西，沒關係來複習一下吧！

• Transition
• Animation(ㄧ)概述
• Animation(二)(name/duration/delay/timing-function)
• Animation(三)(iteraction-count/direction/fill-mode/play-state)
• Animation(四)(keyframes)
• 2DTransform
• 3DTransform

～不專業學習筆記，如有疑問或是錯誤，歡迎不吝指教～

參考來源：
[1]https://www.zhihu.com/question/19749045/answer/458433174
[2]https://blog.csdn.net/u013243347/article/details/79943045
[3]https://ithelp.ithome.com.tw/articles/10197303
[4]https://hk.saowen.com/a/abfa5979edfbc52feb573963727f2467cae83df6c6ee33fdbcbf91f33acef567
[5]https://adon988.logdown.com/posts/4729740-css3-animation-notes