iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
0

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中當作屬性被運用
  • animationtransform可直接運行原因為都有指定屬性“值”的變換,而transition沒有


跳跳球CodePen連結

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

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

參考來源:
[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


上一篇
CSS動畫-3D Transform
下一篇
CSS動畫-範例(二):萬聖節快樂!:目 (1)
系列文
30天讓設計師搞定CSS/SVG動畫30

尚未有邦友留言

立即登入留言