在前端頁面的開發過程中，經常會碰到這么幾個 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，我寫了也是沒多大意義。就在這里統一對比一下這幾個屬性，碰到類似問題的朋友們看到后容易分辨后就好了。

最近在搞一個和前端程序員相關的公號，除了技術分享之外，也增加了對于職業發展、生活記錄之類的文章，歡迎大家關注，一起聊天、吐槽，一起努力工作，認真生活！

總結

以上是生活随笔為你收集整理的css 缩放_CSS 中 transform、animation、transition、translate的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。