位移 translate()
translate()函數可以將元素向指定的方向移動，類似於position中的relative。
簡單的理解：使用translate()函數，可以把元素從原來的位置移動，而不影響在X、Y軸上的任何Web組件。
translate我們分爲三種情況：
1、translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）
2、translateX(x)僅水平方向移動（X軸移動）
3、translateY(Y)僅垂直方向移動（Y軸移動）
實例演示：
通過translate()函數將元素向Y軸下方移動50px,X軸右方移動100px。
HTML代碼：
<div> <div>我向右向下移動</div> </div>
CSS代碼：
.wrapper {
width: 200px;
height: 200px;
border: 2px dotted red;
margin: 20px auto;
}
.wrapper div {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background: orange;
color: #fff;
-webkit-transform: translate(50px,100px);
-moz-transform:translate(50px,100px);
transform: translate(50px,100px);
}演示結果：
過渡函數 transition-timing-function
transition-timing-function屬性指的是過渡的“緩動函數”。主要用來指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，其中要包括以下幾種函數：
案例展示：在hover狀態下，讓容器從一個正方形慢慢過渡到一個圓形，而整個過渡是先加速再減速，也就是運用ease-in-out函數。
HTML代碼:
<div></div>
CSS代碼:
div {
width: 200px;
height: 200px;
background: red;
margin: 20px auto;
-webkit-transition-property: -webkit-border-radius;
transition-property: border-radius;
-webkit-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-delay: .2s;
transition-delay: .2s;
}
div:hover {
border-radius: 100%;
}演示結果：
滑鼠移入： 滑鼠移出：
過渡延遲時間 transition-delay
transition-delay屬性和transition-duration屬性極其類似，不同的是transition-duration是用來設置過渡動畫的持續時間，而transition-delay主要用來指定一個動畫開始執行的時間，也就是說當改變元素屬性值後多長時間開始執行。
有時我們想改變兩個或者多個css屬性的transition效果時，只要把幾個transition的聲明串在一起，用逗號（“，”）隔開，然後各自可以有各自不同的延續時間和其時間的速率變換方式。但需要值得注意的一點：第一個時間的值爲 transition-duration，第二個爲transition-delay。
例如：
a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}示例演示：通過transition屬性將一個200px *200px的橙色容器，在滑鼠懸浮狀態時，過渡到一個300px * 300px的紅色容器。而且整個過渡0.1s後觸發，並且整個過渡持續0.28s。
HTML代碼:
<div> <div>滑鼠放到我的身上來</div> </div>
CSS代碼:
.wrapper {
width: 400px;
height: 400px;
margin: 20px auto;
border: 2px dotted red;
}
.wrapper div {
width: 200px;
height: 200px;
background-color: orange;
-webkit-transition: all .28s ease-in .1s;
transition: all .28s ease-in .1s;
}
.wrapper div:hover {
width: 300px;
height: 300px;
background-color: red;
}演示結果
滑鼠移入： 滑鼠移出：
過渡函數 transition-timing-function
transition-timing-function屬性指的是過渡的“緩動函數”。主要用來指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，其中要包括以下幾種函數：
案例展示：在hover狀態下，讓容器從一個正方形慢慢過渡到一個圓形，而整個過渡是先加速再減速，也就是運用ease-in-out函數。
HTML代碼:
<div></div>
CSS代碼:
div {
width: 200px;
height: 200px;
background: red;
margin: 20px auto;
-webkit-transition-property: -webkit-border-radius;
transition-property: border-radius;
-webkit-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-delay: .2s;
transition-delay: .2s;
}
div:hover {
border-radius: 100%;
}演示結果：
滑鼠移入： 滑鼠移出：
