1. transform
- 通過
transform轉(zhuǎn)換，我們能夠?qū)υ剡M(jìn)行移動(translate)、旋轉(zhuǎn)(rotate)、伸縮(scale)、翻轉(zhuǎn)(skew)。轉(zhuǎn)換是使元素改變形狀、尺寸和位置的一種效果。 - 瀏覽器支持
Internet Explorer 10、Firefox以及Opera支持transform屬性。Chrome和Safari需要前綴 -webkit-。
注釋：Internet Explorer 9需要前綴-ms-。
1.1 2D 轉(zhuǎn)換
-
2D轉(zhuǎn)換方法:translate();rotate();scale();skew();matrix(); -
CSS示例
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 */
}
-
translate()移動
transform: translate(50px,100px); /*右移50px，下移100px*/
transform: translate(50px); /*右移50px*/
translateX(100px); /*右移100px*/
translateY(100px); /*下移100px*/
注釋:使用translate移動元素?zé)o需設(shè)置絕對定位。
-
rotate()旋轉(zhuǎn)
transform: rotate(30deg); /*順時針旋轉(zhuǎn)30度*/
注釋: 2D旋轉(zhuǎn)即為3D旋轉(zhuǎn)中的繞Z軸旋轉(zhuǎn)transform:rotateZ(30deg)。
-
scale()伸縮
transform:scale(2); /*寬度和高度都放大2倍*/
transform:scale(1,2); /*高度放大2倍*/
transform:scaleX(2); /*寬度放大2倍*/
transform:scaleY(2); /*高度放大2被*/
-
skew()翻轉(zhuǎn)
transform:skew(30deg); /*以X軸為軸翻轉(zhuǎn)30度*/
transform:skew(30deg,20deg); /*以X軸為軸翻轉(zhuǎn)30度，以Y軸為軸翻轉(zhuǎn)20度*/
transform:skewX(30deg); /*以X軸為軸翻轉(zhuǎn)30度*/
transform:skewY(30deg); /*以Y軸為軸翻轉(zhuǎn)30度*/
-
transform-origin被轉(zhuǎn)換元素的基準(zhǔn)位置
transform-origin:center; /*中心點(diǎn)作為基準(zhǔn)位置(默認(rèn))*/
transform-origin:left; /*左邊中點(diǎn)作為基準(zhǔn)位置*/
transform-origin:top; /*上邊中點(diǎn)作為基準(zhǔn)位置*/
transform-origin:right; /*右邊中點(diǎn)作為基準(zhǔn)位置*/
transform-origin:bottom; /*底邊中點(diǎn)作為基準(zhǔn)位置*/
transform-origin:left top; /*左上端點(diǎn)作為基準(zhǔn)位置*/
transform-origin:right top; /*右上端點(diǎn)作為基準(zhǔn)位置*/
transform-origin:right bottom; /*右下端點(diǎn)作為基準(zhǔn)位置*/
transform-origin:left bottom; /*左下端點(diǎn)作為基準(zhǔn)位置*/
transform-origin:200px 100px; (200px,100px)/*相對坐標(biāo)作為基準(zhǔn)位置*/
-
matrix(n,n,n,n,n,n)
定義 2D 轉(zhuǎn)換，使用六個值的矩陣。
1.2 3D 轉(zhuǎn)換
-
3D轉(zhuǎn)換可以實(shí)現(xiàn)元素在X軸、Y軸、Z軸方向上的移動、旋轉(zhuǎn)、伸縮、以及翻轉(zhuǎn)處理。
注釋：MDN文檔 -
translate()移動
transform:translateX(50px);
transform:translateY(100px);
transform:translateZ(20px);
/* 第二種寫法 */
transform:translateX(50px) translateY(100px) translateZ(20px);
-
rotate()旋轉(zhuǎn)
transform:rotateX(45deg);
transform:rotateY(45deg);
transform:rotateZ(45deg);
/* 第二種寫法 */
transform:rotateX(45deg) rotateY(45deg) rotateZ(45deg);
-
scale()伸縮
transform:scaleX(0.5);
transform:scaleY(1);
transform:scaleZ(2);
/* 第二種寫法 */
transform:scaleX(0.5) scaleY(1) scaleZ(2);
-
skew()翻轉(zhuǎn)
transform:skewX(45deg);
transform:skewY(45deg);
注意:和2D效果類似，翻轉(zhuǎn)只有兩個方向。
2. transition
-
CSS3中的動畫分為animation功能與transition功能，這兩種功能都可以通過改變CSS中的屬性值來產(chǎn)生動畫效果。
(1)animation功能支持通過關(guān)鍵幀的指定在頁面上產(chǎn)生復(fù)雜的動畫效果。
(2)transition功能支持從一個屬性值平滑過渡到另一個屬性值。
注釋：animation支持關(guān)鍵幀(中間狀態(tài))的設(shè)定；支持動畫暫停效果；支持延遲時間與動畫結(jié)束后的狀態(tài)設(shè)定。transition不支持中間狀態(tài)的設(shè)定。不支持動畫暫停效果。不支持延遲時間與動畫結(jié)束后的狀態(tài)設(shè)定。 - 語法
transition:屬性名稱 過渡時間 速度曲線 延遲時間 ,屬性名稱 過渡時間 速度曲線 延遲時間
屬性名稱：默認(rèn)值(all) 、width
過渡時間：默認(rèn)值(0)、3s、2000ms
速度曲線：默認(rèn)值(ease)(慢-快-慢) 、linear(勻速)、ease-in(慢-塊) 、ease-out(快-慢)
延遲時間：默認(rèn)值(0)、3s、2000ms
注釋:過渡時間不可省略，其余都可省略。 - 應(yīng)用于單項(xiàng)屬性的過渡效果
div{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
div:hover{
width: 300px;
}
- 應(yīng)用于多項(xiàng)屬性的過渡效果
如需添加多個樣式的過渡效果，則用逗號隔開。
div{
transition: width 2s, height 3s, transform 5s;
}
- 應(yīng)用于所有屬性的過渡效果
div{
transition: 2s;
}
注釋:默認(rèn)值為all。
3. animation與@keyframes
-
transition實(shí)現(xiàn)動畫時只能指定要改變的屬性的開始值和結(jié)束值，然后在這兩個值之間進(jìn)行平滑過渡的方式來實(shí)現(xiàn)動畫效果，不能實(shí)現(xiàn)比較復(fù)雜的動畫效果；而animation通過定義多個關(guān)鍵幀(@keyframes)以及定義每個關(guān)鍵幀中元素的屬性值來實(shí)現(xiàn)更為復(fù)雜的動畫效果。 -
@keyframes規(guī)則用于創(chuàng)建動畫。在@keyframes中規(guī)定某項(xiàng)CSS樣式，就能創(chuàng)建由當(dāng)前樣式逐漸改為新定義樣式的動畫效果。 -
@keyframe語法
@keyframe 關(guān)鍵幀集合的名稱{創(chuàng)建關(guān)鍵幀的代碼} -
animation功能的使用方法
animation:動畫名稱 動畫時間 速度曲線 延遲時間 執(zhí)行次數(shù) 執(zhí)行方向 是否暫停 其它狀態(tài)
動畫名稱：關(guān)鍵幀集合的名稱
動畫時間：默認(rèn)值(0)、3s、2000ms
速度曲線：默認(rèn)值(ease)(慢-快-慢) 、linear(勻速)、ease-in(慢-塊)、ease-out(快-慢)
延遲時間：默認(rèn)值(0)、3s、2000ms、-2s(立即執(zhí)行，跳過2秒)
執(zhí)行次數(shù)：默認(rèn)值(1) 、5、infinite(無限次播放)
執(zhí)行方向：默認(rèn)值(normal)(每次動畫執(zhí)行完畢后返回初始狀態(tài)) 、alternate(正反交替輪流播放)、reverse(反向執(zhí)行動畫)、alternate-reverse(反向開始交替輪流播放)
是否暫停：默認(rèn)值(running)(動畫正在播放)、paused(動畫已暫停)。
其它狀態(tài)：默認(rèn)值(none)(不改變默認(rèn)行為)、forwards（當(dāng)動畫完成后，保持最后一個屬性值）、backwards(在animation-delay所指定的一段時間內(nèi)，在動畫顯示之前，應(yīng)用開始屬性值)、both(向前和向后填充模式都被應(yīng)用)。
注釋: 動畫名稱與動畫時間不可省略，其余都可省略。 - 簡單示例
#tc{animation:zh 4s;}
@keyframes zh{
0%{height: 150px;width: 150px;background-color:pink;}
25%{height: 200px;width: 200px;background-color:green;}
50%{height: 100px;width: 100px;background-color:yellow;}
70%{height: 400px;width: 400px;background-color:blue;}
100%{height: 500px;width: 500px;background-color:pink;}
}
注釋:為了得到最佳的瀏覽器支持，應(yīng)始終定義0%和 100%選擇器。
- 暫停動畫
animation-play-state: paused|running;
plused：定義動畫暫停
running：定義動畫播放
tc.onmouseover=function(){
this.style.animationPlayState='paused';
};
tc.onmouseout=function(){
this.style.animationPlayState='running';
}
- 動畫起始終止?fàn)顟B(tài)
animation-fill-mode : none | forwards | backwards | both;
none：默認(rèn)值(以初始狀態(tài)作為起始終止?fàn)顟B(tài))
forwards：以100%時的屬性值作為動畫終止?fàn)顟B(tài)
backwards：以0%時的屬性值作為延遲時間內(nèi)的狀態(tài)
both：forwards與backwards模式都將生效
注釋:animation-fill-mode屬性必須定義在animation屬性之后才會生效。
4. 總結(jié)
-
transform
CSS3中的變形處理，實(shí)現(xiàn)文字和圖像的移動、旋轉(zhuǎn)、伸縮、翻轉(zhuǎn)等。 -
transition
CSS3中的動畫功能，通過一個屬性值平滑過渡到另一個屬性值來實(shí)現(xiàn)。 -
animation
CSS3中的動畫功能，通過在樣式中創(chuàng)建多個關(guān)鍵幀，在這些關(guān)鍵幀中編寫樣式，并且能夠在頁面上綜合運(yùn)行這些關(guān)鍵幀來實(shí)現(xiàn)較為復(fù)雜的動畫。 - 重繪與回流
(1) 重繪
操作影響了頁面的可見性，但是沒有影響布局，瀏覽器發(fā)生重繪。
改變透明度、背景顏色、字體顏色、改變同等尺寸img會發(fā)生重繪。
(2) 回流
瀏覽器重新計(jì)算所有元素的尺寸和位置。
CSS樣式?jīng)]有放在head頭部、刪減Dom節(jié)點(diǎn)、改變Dom節(jié)點(diǎn)尺寸等會引起回流。
注釋:重繪布局不變、重新繪制?；亓鞑季指淖?、重新繪制。 - 為避免回流，使用
CSS3執(zhí)行動畫的元素應(yīng)絕對定位(脫離文檔流)。
參考資料
響應(yīng)式布局頁面
理解CSS3 transform中的Matrix(矩陣)
好吧，CSS3 3D transform變換，不過如此！
