example:
元素整體居中：
.box{
position:absolute;
top:50%;
left:50%;
width:50px;
height:50px;
transform:translate(-50%,-50%);
background:gray;
}
1.translate:移動，是transform的一個方法
通過translate()方法，元素從其當前位置移動，根據給定的left(x坐標)和top(y坐標)位置參數：
用法transform: translate(50px, 100px);
-ms-transform: translate(50px,100px);
-webkit-transform: translate(50px,100px);
-o-transform: translate(50px,100px);
-moz-transform: translate(50px,100px);
2. transform:變形，改變
css3中主要包括：
在css3中transform主要包括以下幾種： 旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。
旋轉：rotate() 順時針旋轉給定的角度，允許負值rotate(30deg)
扭曲：skew()元素翻轉給定的角度，根據給定的水平線(x軸)和垂直線（Y軸）參數：skew(30deg,20deg)
縮放：scale()放大或縮小，根據給定的寬度（X軸）和高度（Y軸）參數：scale(2,4)
移動：translate()平移，傳進x,,y值，代表沿x軸和y軸平移的距離
所有的2D轉換方法組合在一起： matrix()旋轉、縮放移動以及傾斜元素
matrix(scale.x,scale.y,translate.x,translate.y)
改變起點位置 transform-origin: bottom left;
transform: rotate旋轉|scale縮放|skew扭曲|translate移動|matrix矩陣變形；
綜合起來使用：transform: 30deg 1.5 30deg 20deg 100px 200px;//需要有空格隔開
3. transition: 允許css屬性值在一定的時間區間內平滑的過渡。（過渡動畫）
transition作用是指定了某一個屬性（如width、left、transform等）在兩個值之間如何過渡。
如果某一個元素指定了Transition,那么當其某個屬性改變的時候就會按照Transition指定的方式進行過渡，動畫就這么產生了。
transition主要包含四個屬性值：
(1) 執行變換的屬性：transition-property;
(2) 變換延續的時間：transition-duration;
(3) 在延續時間段，變換的速率變化：transition-timing-function //例：平緩進入、先快后慢；
(4) 變換延遲時間： transition-delay
需要事件的觸發，例如單擊、獲取焦點、失去焦點等。
語法：transition: property duration timing-function delay;
例如：transition: width 2s ease 0s;
4.Animation
Animation也是通過指定某一個屬性（如width、left、transform等）在兩個值之間如何過渡來實現動畫的。
CSS3動畫：
定義動畫：
@keyframes 自定義動畫名稱 {
from{}
to{}
}
@keyframes 自定義動畫名稱 {
0%{}
100%{}
}
調用動畫
調用動畫
animation: 動畫名稱 動畫時間 動畫速度 動畫延遲 動畫次數 動畫方向 動畫播放狀態 動畫完成時的狀態
動畫名稱: animation-name
動畫時間 animation-duration
動畫速度 animation-timing-function: linear（勻速變化） ease（低俗開始，然后加快，快結束的時候再放慢） ease-in（低速開始） ease-out（低速結束） ease-in-out（低俗開始，低速結束） steps()
動畫延遲 animation-delay
動畫次數 animation-iteration-count: infinite
動畫方向 animation-direction:
動畫播放狀態: animation-play-state: running pause
動畫完成時的狀態: animation-fill-mode:forwards backwards
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
animation: move 5s linear infinite;
}
@keyframes move {
0%{
left: 100px;
}
50%{
left: 150px;
}
100%{
left: 200px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
與Transition不同的是：
1.Animation可以通過keyframe顯示控制當前幀的屬性值，而Transition只能隱式來進行（不能指定每幀的屬性值），所以相對而言Animation的功能更加靈活。
2. Animation通過模擬屬性值改變來實現動畫，動畫結束之后元素的屬性沒有變化；而Transiton確實改變了元素的屬性值，動畫結束之后元素的屬性發生了變化；這一點，這在實際應用中會產生很大的區別。