transition、transform和translate這三者經常有人搞混，先把這三者做一個簡單解釋：
transform是 轉換，指的是改變所在元素的外觀，它有很多種手段(轉換函數)來改變外觀，例如 位移、縮放、旋轉 等，而其中的位移的函數名就叫translate，所以說，translate是transform的一部分。transition是 過渡，指的是某個CSS屬性值如何平滑的進行改變，就是平常說的 動效。而transform是沒有動畫效果，你改變了它的值，元素的樣子就唰的改變了。
transition 過渡
基本用法
好，接下來看一下transition的基本用法：
transition: [屬性名] [持續時間] [速度曲線] [延遲時間];
我們可以很方便的用這個過渡來給某一個屬性加上好看的動效。例如，高度屬性的值改變時，延遲 0.5 秒後以 ease 曲線進行過渡，持續2秒：
transition: height 2s ease .5s;
或者一個屬性不夠，想要監聽所有屬性。
transition: all 2s ease .5s;
注意，這裏的所有屬性是指能進行動畫過渡的屬性，有很多屬性是不能進行過渡的，比如display，你不能讓一個div的顯示模式慢悠悠的發生過渡。
有了上面的認識時候搭配:hover等可以引起屬性值變化的僞類時就可以很輕鬆的做出一個動畫效果：
.box {
width: 10px;
transition: width 0.4s ease;
}
.box:hover {
width: 50px;
}
給多個屬性指定同一個過渡
接下來深入一點，如果你想給多個屬性指定同一個過渡的時候該怎麼做？如下：同時監聽寬度和高度進行過渡
transition-property: width, height;
transition-duration: 2s;
transition-timing-function: ease;
transition-delay: .5s;
場面有點控制不住了，其實這四條就是transition屬性的四個值，也就是如下寫法是等同的：
transition: width 2s ease .5s
// 等同於
transition-property: width;
transition-duration: 2s;
transition-timing-function: ease;
transition-delay: .5s;
但是，千萬不要簡寫成這樣！會報錯的。至於爲啥報錯，看下一小節。
transition: height, width 2s ease .5s;
給多個屬性指定多個過渡
咱們再深入一點，如果想指定height的過渡爲2s，width的過渡爲3s該怎麼做呢？如下：
transition-property: height, width;
transition-duration: 2s, 3s;
// 其他屬性可以省略
這麼寫確實可以，第1個逗號前的爲一組，第二個逗號前的爲另一種...但是如果寫的屬性比較多的話，豈不是要開始數逗號了？所以我們可以用更方便的寫法簡寫一下：
transition: height 2s, width 3s;
這麼看是不是舒服多了，這也是上一小節爲啥報錯的原因，,前必須是一個完整的過渡描述。
transform 轉換
基本用法
接下來把transition放一下來看看transform，基本格式如下：
transform: [轉換函數];
先說基本用法，transform接受一個轉換函數，每個轉換函數都會有不同的效果，下面是三個主要的2D轉換函數，更多函數點擊 W3C - CSS3 transform 屬性 查看：
| 函數 | 作用 | 參數介紹 | 參數默認值 |
|---|---|---|---|
translate(x, y) |
元素位移 | 元素偏移的x軸和y軸距離，可爲負 | (0px, 0px) |
scale(x, y) |
元素縮放 | 元素x軸和y軸縮放的倍數，小於1爲縮小，大於1位放大，小於0效果和爲0時相等 | (1, 1) |
rotate(angle) |
元素旋轉 | 旋轉的角度，單位deg，順時針旋轉 |
(0deg) |
所以我們想移動當前元素的話就可以這樣(往上移動 10 像素，往右移動 10 像素)：
transform: translate(-10px, 10px);
指定多個轉換效果
好，回憶起了基本用法之後就深入一點，如果想給當前元素配置多個轉換效果怎麼辦，如下(向右下角移動 10 像素並順時針旋轉10°)：
transform: translate(10px, 10px) rotate(10deg);
仔細看，轉換函數之間可沒有逗號。當初這個地方還坑了我一手。
transition + transform
下面這種寫法可以給transform指定一個過渡：
transition: transform 2s ease .5s;
但是很容易就可以發現，這是給所有的轉換函數都配置了相同的過渡啊，如果我想讓位移translate過渡的慢一點，而旋轉rotate過渡的快一點該怎麼辦呢？
答案就是，使用animation動畫效果，我暫時還沒有找到只使用transition和transform就能給多個轉換函數配置不同過渡的方法，有大佬知道一定要告訴我，多謝！
transform 對文檔流的影響
如果使用transition監聽基本屬性，例如height或width等，其值在發生改變時就會對文檔流產生影響，比如下圖，鼠標懸停的div長寬變化會把其他的div給“擠開”，甚至最邊上的還擠到了下一行。並且，可以長寬屬性在發生變化時元素的固定點不是中心，而是左上角，當初如何把固定點換成中心可以困擾了我很久。
.box {
width: 100px;
height: 100px;
transition: all 0.4s ease;
}
.box:hover {
width: 120px;
height: 120px;
}
transition 過渡基本屬性
而使用transform則不會出現這種情況，如下。因爲transform只會影響當前元素的狀態，達到類似position: relative;的效果，而且transform是默認基於元素的中心進行轉換的，就算想改的話也可以使用transform-origin屬性進行修改，具體用法非常簡單，這裏就不再贅述。
.box {
width: 100px;
height: 100px;
transition: all 0.4s ease;
}
.box:hover {
transform: scale(1.2, 1.2);
}
transition 過渡 transform