css變換與動畫詳解
舉個栗子：
--------元素整體居中
.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等）在兩個值之間如何過渡。
如果某一個元素指定了Transiton，那麼當其某個屬性改變的時候就會按照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等）在兩個值之間如何過渡來實現動畫的，
與Transition不同的是：
1.Animation可以通過keyframe顯式控制當前幀的屬性值，而Transition只能隱式來進行
（不能指定每幀的屬性值），所以相對而言Animation的功能更加靈活；
2.Animation通過模擬屬性值改變來實現動畫，動畫結束之後元素的屬性沒有變化；而Transition確實改變了元
素的屬性值，動畫結束之後元素的屬性發生了變化；這一點，這在實際應用中會產生很大的區別。
Animation模組包括了animation-name、animation-duration、animation-timing-function、
animation-delay、animation-iteration-count、animation-play-state等屬性。
animation詳解：
什麼是css3中的動畫：
使元素從一種樣式逐漸變化為另一種樣式
可以改變任意多的樣式任意多的次數
可以用百分比規定變化發生的時間，或者用關鍵詞“from”和“to”,等價於“0%”和“100%”，表示動畫的開始和完成
通過css3我們可以建立動畫，可以代替頁面中的動畫圖片、Flash動畫以及JavaScript。
如果建立css動畫，需要了解@keyframes規則。
@keyframes規則用於建立動畫，在其中規定某項css樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。
相容性：
Internet Explorer 10、Firefox 以及 Opera 支援 @keyframes 規則和 animation 屬性。
Chrome 和 Safari 需要字首 -webkit-。
註釋：Internet Explorer 9，以及更早的版本，不支援 @keyframe 規則或 animation 屬性。
實現：
在 @keyframes 中建立動畫時，要將其捆綁到某個選擇器，否則不會產生動畫效果。
需要至少規定以下兩項：
規定動畫的名稱
規定動畫的時長
示例：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
/*相容處理*/
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
/*定義動畫----myfirst是動畫的名稱*/
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>