标签：strong post dev transform not using web table UNC
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元素運算，因此必須考慮效能 |
其他參考網站:
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
CSS製作動畫效果(Transition、Animation、Transform)
标签：strong post dev transform not using web table UNC
原文地址：https://www.cnblogs.com/sipher/p/11068346.html
