CSS3中的transition和transform屬性

一、前言

開門見山的說，transition、transform和translate這三者經常有人搞混，先把這三者做一個簡單解釋：

transform是 轉換，指的是改變所在元素的外觀，它有很多種手段(轉換函數)來改變外觀，例如 位移、縮放、旋轉 等，而其中的位移的函數名就叫translate，是以說，translate是transform的一部分。

transition是 過渡，指的是某個CSS屬性值如何平滑的進行改變，就是平常說的 動效。而transform是沒有動畫效果，你改變了它的值，元素的樣子就唰的改變了。

二、transition 過渡

1.基本用法

好，接下來看一下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;
}      

2.給多個屬性指定同一個過渡

接下來深入一點，如果你想給多個屬性指定同一個過渡的時候該怎麼做？如下：同時監聽寬度和高度進行過渡。

transition-property: width, height;
transition-duration: 2s;
transition-timing-function: ease;
transition-delay: .5s;      

但是，千萬不要簡寫成這樣！會報錯的。至于為啥報錯，看下一小節。

transition: height, width 2s ease .5s;      

3.給多個屬性指定多個過渡

咱們再深入一點，如果想指定height的過渡為2s，width的過渡為3s該怎麼做呢？如下：

transition-property: height, width;
transition-duration: 2s, 3s;
// 其他屬性可以省略      

這麼寫确實可以，第1個逗号前的為一組，第二個逗号前的為另一種…但是如果寫的屬性比較多的話，豈不是要開始數逗号了？是以我們可以用更友善的寫法簡寫一下：

transition: height 2s, width 3s;      

這麼看是不是舒服多了，這也是上一小節為啥報錯的原因，,前必須是一個完整的過渡描述。

三、transform 轉換

1.基本用法

接下來把transition放一下來看看transform，基本格式如下：

transform: [轉換函數];      

先說基本用法，transform接受一個轉換函數，每個轉換函數都會有不同的效果，下面是三個主要的2D轉換函數，更多函數屬性 檢視 W3C - CSS3 transform。

是以我們想移動目前元素的話就可以這樣(往上移動 10 像素，往右移動 10 像素)：

transform: translate(-10px, 10px);      

2.指定多個轉換效果

好，回憶起了基本用法之後就深入一點，如果想給目前元素配置多個轉換效果怎麼辦，如下(向右下角移動 10 像素并順時針旋轉10°)：

transform: translate(10px, 10px) rotate(10deg);      

仔細看，轉換函數之間可沒有逗号。當初這個地方還坑了我一手。

3.transition + transform

下面這種寫法可以給transform指定一個過渡：

但是很容易就可以發現，這是給所有的轉換函數都配置了相同的過渡啊，如果我想讓位移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;
}      

而使用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);
}      

4、動畫速度屬性補充說明