- CSS 2D Transforms
- CSS 3D Transforms
- 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://ithelp.ithome.com.tw/articles/10197303
来源: http://www.bubuko.com/infodetail-3100175.html