CSS製作動畫效果(TransitionAnimationTransform)

Posted 2022-02-01 sipher

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://boohover.pixnet.net/blog/post/35341387-%E6%97%8B%E8%BD%89%E3%80%81%E5%82%BE%E6%96%9C%E3%80%81%E7%B8%AE%E6%94%BE%E7%9A%84%E8%AE%8A%E5%BD%A2%E6%95%88%E6%9E%9C-transform-%28css-prope

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