點擊右上方紅色按鈕關注“web秀”，讓你真正秀起來！
前言
css屬性很多，無論是字母的拼寫還是字面上的意思，很多人都容易混淆，包括我在內，也時不時需要去看看到底是咋回事，是不是也混淆過你～
下面列舉幾個最容易混淆的屬性：
1. animation（動畫） 用於設置動畫屬性，他是一個簡寫的屬性，包含6個屬性；
2. transition（過渡）用於設置元素的樣式過度，和animation有著類似的效果，但細節上有很大的不同；
3. transform（變形） 用於元素進行旋轉、縮放、移動或傾斜，和設置樣式的動畫並沒有什麼關係，就相當於color一樣用來設置元素的“外表”；
4. translate（移動） translate只是transform的一個屬性值，即移動。
下面詳細介紹。
animation（動畫）
語法：`animation: name duration timing-function delay iteration-count direction;`
1. name（需要綁定到選擇器的 keyframe 名稱）
2. duration（完成動畫所花費的時間，以秒或毫秒計）
3. function（動畫的速度曲線）
4. delay（動畫開始之前的延遲）
5. count（動畫應該播放的次數）
6. direction（是否應該輪流反向播放動畫）
CSS3最容易混淆屬性
transition（過渡）
語法：`transition: property duration timing-function delay;`
1. property（設置過渡效果的 CSS 屬性的名稱）
2. duration（完成過渡效果需要多少秒或毫秒）
3. function（速度效果的速度曲線）
4. delay（過渡效果何時開始）
CSS3最容易混淆屬性
transform（變形）
語法：`transform: none|transform-functions;`
functions提供多種方法，如：skewX(angle)沿著 X 軸的 2D 傾斜轉換，translate3d(x,y,z)3D 轉換，rotate(angle)2D 旋轉，在參數中規定角度等等
CSS3最容易混淆屬性
是不是發現羨慕已久的導航就是這樣搞定的！
translate（移動）
`translate`其實是 `transform`的一種方法，進去2D或者3D移動
1. translate(x,y) 2D平移，x/y分別是x座標平移多少像素，y座標平移多少像素
2. translate3d(x,y,z) 3D平移，和2D一樣
閱讀更多 web秀 的文章
