CSS 中 transform、animation、transition、translate的區別

在前端頁面的開發過程當中，常常會碰到這麼幾個 CSS 屬性容易搞混：transform、translate、animation還有transition。下面就針對這幾個 CSS 屬性作一個對比，辨別這幾個屬性的區別以及瞭解他們的使用場景。

簡單歸納一下：

1. transform：主要應用於元素的 2D 或者 3D轉換，能夠將元素 旋轉、縮放、移動、傾斜等,使用的時候注意兼容性就行了；
2. translate：主要控制目標元素的移動（2D、3D）。目前爲止還能夠說是一個 CSS 變換函數，賦值給transform使用，而不是一個徹底能夠單獨使用的css屬性，由於目前只有火狐瀏覽器支持它的css屬性寫法；
3. animation：CSS 動畫，將元素的樣式配置轉換到另外一個CSS配置。包括動畫所使用的樣式規則，以及用於指定動畫開始、結束以及中間多個節點的關鍵幀；
4. transition：CSS過渡屬性，爲一個元素在不一樣狀態切換的時候定義不一樣的過渡效果。

原本想寫一下demo的，可是想了想，仍是算了~你們在W3school，MDN，菜鳥教程均可以看到相關的小demo，我寫了也是沒多大意義。就在這裏統一對比一下這幾個屬性，碰到相似問題的朋友們看到後容易分辨後就行了。