transform
transform是才css3動(dòng)畫的主要部分，可以實(shí)現(xiàn)旋轉(zhuǎn)、縮放、傾斜、移動(dòng)等動(dòng)畫，
主要用到的有
- rotate(角度)：沿中心點(diǎn)旋轉(zhuǎn)一定的角度，例如：rotate(30deg);
- scale(方法倍數(shù))：沿中心點(diǎn)放大一定的倍數(shù)，例如：scale(2);
- translate(x軸上的位移，y軸上的位移)：左上角移動(dòng)到相應(yīng)的位置：例如translate(100px,100px);
- skew(x軸上的傾斜角度,y軸上的傾斜角度)：改變?cè)氐膬A斜角度，例如：skew(30deg, 60deg);
值得注意的是transform變化以后，不會(huì)改變?cè)毓逃械膶傩?，可以理解為只是在視覺上產(chǎn)生了變化（只是改變狀態(tài)未改變其真正的屬性）。例如元素原本的left是100px；使用translate改變位置以后，然后獲取left的值還是100px;
具體使用（由于兼容性問題，實(shí)際運(yùn)用一定要加上前綴）：
-webkit-transform: translate(200px,200px) scale(3) rotate(30deg);
-moz-transform: translate(200px,200px) scale(3) rotate(30deg);
-ms-transform: translate(200px,200px) scale(3) rotate(30deg);
-o-transform: translate(200px,200px) scale(3) rotate(30deg);
transform: translate(200px,200px) scale(3) rotate(30deg);
但是transform在單獨(dú)使用的時(shí)候并不會(huì)產(chǎn)生動(dòng)畫效果，頁面加載的時(shí)候就已經(jīng)在變化后的狀態(tài)了，所以需要搭配transition使用，產(chǎn)生動(dòng)畫效果。
transition
transition: 設(shè)置過渡效果的 CSS 屬性的名稱(width, height, left, right或者用all表示所有屬性都可以)
完成過渡效果需要多少秒或毫秒 (2s)
規(guī)定速度效果的速度曲線 (linear勻速\ease慢快慢\eare-in慢快\eare-out快慢\ease-in-ou慢快慢,和eare速度上有差異)，這個(gè)屬性還可以使用cubic-bezier(n,n,n,n)自己定義，n的范圍在0-1之間。
定義過渡效果何時(shí)開始(2s)
具體使用：
transition: width,2s,linear,2s;
hover或者其他操作的時(shí)候
width: 400px;
搭配transform使用：
transition: all,2s,linear,2s;
hover或者其他操作的時(shí)候
transform: rotate(30deg);
animation
animation可以實(shí)現(xiàn)連續(xù)的動(dòng)畫，常用的格式如下：
animation： move1 2s infinite；
@keyframes move1{
form{left: 100px;}
to{left: 300px;}
animation： move1 2s infinite；
@keyframes move1{
0%{
left: 100px;
}20%{
left: 300px;
}50%{
top:300px;
}100%{
width:500px;
}
}
