CSS製作動畫效果(Transition、Animation、Transform)
CSS 2D Transforms
https://www.w3schools.com/css/css3_2dtransforms.asp
CSS 3D Transforms
https://www.w3schools.com/css/css3_3dtransforms.asp
CSS Transitions
https://www.w3schools.com/css/css3_transitions.asp
CSS Animations
https://www.w3schools.com/css/css3_animations.asp
參考自: https://ithelp.ithome.com.tw/articles/10200712
Transition、Animation、Transform 三者的差異
| 名稱 | 介紹 | 作用於 |
|---|---|---|
Transition |
基礎的動畫效果，強調單一CSS屬性的過渡動畫 | 通常為單一CSS屬性間變化 |
Animation |
細節複雜的動畫效果，強調css屬性的流程與控制，可加keyframes | 多種CSS屬性變化 |
Transform |
控制html元素的旋轉、縮放、移動等等 | HTML元素(包含內容)變化 |
| 名稱 | 可否自行運作 | 效能問題 |
|---|---|---|
Transition |
✗，需要事件或偽類別觸發 | 另一獨立執行緒處理，較不影響效能 |
Animation |
✔，進入頁面可以直接運行 | 另一獨立執行緒處理，較不影響效能 |
Transform |
✔，進入頁面可以直接運行 | 因會操作HTML元素運算，因此必須考慮效能 |
- animation可以說是包含很多個transition控制的屬性，transition是大略的CSS屬性變化，animation可以做出更細節的部分
- transform可以在animation中當作屬性被運用
- animation和transform可直接運行原因為都有指定屬性“值”的變換，而transition沒有
其他參考網站:
https://adon988.logdown.com/posts/4729740-css3-animation-notes
https://ithelp.ithome.com.tw/articles/10197303
https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
https://blog.csdn.net/yujin0213/article/details/79262825
https://www.oxxostudio.tw/articles/201502/css-bounce.html
