主要總結(jié)一下CSS3動(dòng)畫中這幾塊：
transition（過渡），animation（動(dòng)畫）峻呕，transform轉(zhuǎn)換（rotate吻商，translate庸汗，scale，skew手报，matrix）
一蚯舱、transition（過渡）
img{
height:15px;
width:15px;
}
img:hover{
height: 450px;
width: 450px;
}
這個(gè)變化是沒有時(shí)間軸的改化，都是立即完成，當(dāng)加入transiton后：
img{
transition: 1s 1s height ease;
}
簡寫形式枉昏，可以單獨(dú)定義成各個(gè)屬性:
img{
transition-property: height; //高度過渡
transition-duration: 1s;
transition-delay: 1s; //延遲一秒
transition-timing-function: ease; //逐漸變慢
}
目前陈肛，各大瀏覽器（包括IE 10）都已經(jīng)支持無前綴的transition，所以transition已經(jīng)可以很安全地不加瀏覽器前綴兄裂。
二句旱、animation（動(dòng)畫）
CSS Animation需要指定動(dòng)畫一個(gè)周期持續(xù)的時(shí)間，以及動(dòng)畫效果的名稱晰奖。
div:hover {
animation: 1s rainbow;
}
上面代碼表示谈撒，當(dāng)鼠標(biāo)懸停在div元素上時(shí)，會(huì)產(chǎn)生名為rainbow的動(dòng)畫效果匾南，持續(xù)時(shí)間為1秒啃匿。為此，我們還需要用keyframes關(guān)鍵字蛆楞，定義rainbow效果溯乒。
@keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
上面代碼表示，rainbow效果一共有三個(gè)狀態(tài)豹爹，分別為起始（0%）裆悄、中點(diǎn)（50%）和結(jié)束（100%）。如果有需要臂聋，完全可以插入更多狀態(tài)光稼。
也可以指定動(dòng)畫具體播放的次數(shù)，比如3次孩等，無限循環(huán)就用infinite:
div:hover {
animation: 1s rainbow 3;
}
keyframes關(guān)鍵字用來定義動(dòng)畫的各個(gè)狀態(tài)钟哥，它的寫法相當(dāng)自由,0%可以用from代表，100%可以用to代表瞎访，因此之前的代碼等同于下面的形式：
@keyframes rainbow {
from { background: #c00 }
50% { background: orange }
to { background: yellowgreen }
}
三腻贰、transform轉(zhuǎn)換
1、translate移動(dòng)
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}
值 translate(50px,100px) 把元素從左側(cè)移動(dòng) 50 像素扒秸，從頂端移動(dòng) 100 像素播演。
2、rotate旋轉(zhuǎn)
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
值 rotate(30deg) 把元素順時(shí)針旋轉(zhuǎn) 30 度伴奥。
3写烤、scale改變寬高
div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari 和 Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}
值 scale(2,4) 把寬度轉(zhuǎn)換為原始尺寸的 2 倍，把高度轉(zhuǎn)換為原始高度的 4 倍拾徙。
4洲炊、skew圍繞X軸或Y軸翻轉(zhuǎn)
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}
值 skew(30deg,20deg) 圍繞 X 軸把元素翻轉(zhuǎn) 30 度，圍繞 Y 軸翻轉(zhuǎn) 20 度。
5暂衡、matrix
matrix() 方法把所有 2D 轉(zhuǎn)換方法組合在一起询微。需要六個(gè)參數(shù)，包含數(shù)學(xué)函數(shù)狂巢，允許您：旋轉(zhuǎn)撑毛、縮放、移動(dòng)以及傾斜元素唧领。
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}
matrix 方法將 div 元素旋轉(zhuǎn) 30 度
