學習筆記第十四章使用CSS3動畫

阿新 • • 發佈：2017-12-08

進行 delay 簡單的 angle 新版 chrome tor 3.0 :focus

第14章使用CSS3動畫

【學習重點】

設計2D動畫
設計3D動畫
設計過渡動畫
設計幀動畫
能夠使用CSS3動畫功能設計頁面特效樣式

14.1 設計2D動畫

CSS2D Transform表示2D變換，目前獲得了各主流瀏覽器的支持；CSS3D Transform支持程度不是很完善，僅能夠在部分瀏覽器中獲得支持。語法如下：

transform:none | <transform-function> [ <transform-function>]*;

transform屬性的初始值是none，適用於塊元素和行內元素。
<transform-function>設置變換函數。可以是一個或多個變換函數列表。transform-function函數包括matrix()、translate()、scale()、scaleX()、scaleY()、rotate()、skewX()、skewY()、skew()等。
關於這些常用變換函數的功能簡單說明如下：
- matrix()：定義矩陣變換，即基於X和Y坐標重新定位元素的位置；
- translate()：移動元素對象，即基於X和Y坐標重新定位元素；
- scale()：縮放元素對象，可以使任意元素對象尺寸發生變化，取值包括正數和負數，以及小數；
- rotate()：旋轉元素對象，取值為一個度數值；
- skew()：傾斜元素對象，取值為一個度數值。

14.1.1 定義旋轉

rotate()函數能夠旋轉指定的元素對象，主要在二維空間內進行操作，接收一個角度參數值，用來指定旋轉的幅度，語法如下：

rotate(<angle>);

14.1.2 定義縮放

scale()函數能夠縮放元素大小，該函數包含兩個參數值，分別用來定義寬和高縮放比例。語法如下：

scale(<number>[, <number>]);

<number>參數值可以是正數、負數和小數。正數值基於指定的寬度和高度將放大元素。負數值不會縮小元素，而是翻轉元素（如文字反轉），然後再縮放元素。使用小於1的小數可以縮放元素。如果第2個參數省略，則第二個參數等於第一個參數值。

14.1.3 定義移動

translate()函數能夠重新定位元素的坐標，該函數包含兩個參數值，分別用來定義x軸和y軸坐標。語法如下：

translate(<translation-value>[,<translation-value>]);

14.1.4 定義傾斜

skew()函數能夠讓元素傾斜顯示，該函數包含兩個參數值，分別用來定義x軸和y軸坐標傾斜的角度，語法如下：

skew(<angle> [, <angle>]);

<angle>參數表示角度值，第一個參數表示相對於x軸進行傾斜，第二個參數表示相對於y軸進行傾斜，如果省略了第二個參數，則第二個參數值默認值為0。

14.1.5 定義矩陣

matrix()是矩陣函數，調用該函數可以非常靈活地實現各種變換效果。matrix()函數的語法如下：

matrix(<number>,<number>,<number>,<number>,<number>,<number>);

六個參數分別負責控制x軸縮放，x軸傾斜，y軸傾斜，y軸縮放，x軸移動，y軸移動。使用前面4個參數的配合，可以實現旋轉效果。

14.1.6 定義變換原點

CSS變換的原點默認為對象的中心點，如果要改變這個中心點，可以使用transform-origin屬性進行定義。語法如下：

transform-origin:[[<percentage>|<length>| left | center | right] [<percentage>|<length>| top | center | bottom]?] | [[ left | center | right ] || [ top | center | bottom ]]

transform-origin屬性的初始值為50% 50%，適用於塊狀元素和內聯元素。transform-origin接收兩個參數，可以是百分比、em、px等具體的值，也可以是left、center、right或者top、middle、bottom等描述性關鍵字。

14.2 設計3D變換

CSS3的3D變換主要包括的函數如下：

3D位移：包括translateZ()和translate3d()函數；
3D旋轉：包括rotateX()、rotateY()、rotateZ()和rotate3d()函數；
3D縮放：包括scaleZ()和scale3d()函數；
3D矩陣：包含matrix3d()函數。

考慮到瀏覽器兼容性，主流瀏覽器對3D變換支持不是很好，具體如下：

IE10+，3D變換部分未得到很好支持；
Firefox10.0至Firefox15.0版本瀏覽器，在使用3D變換時應添加私有屬性-moz-，Firefox16.0+版本無需添加私有屬性；
Chrome12.0+版本中使用3D變換時需要添加私有屬性-webkit-；
Safari4.0+版本中使用3D變換時需要添加私有屬性-webkit-；
Opera15.0+版本才開始支持3D變換，使用時需要添加私有屬性-webkit-；
移動設備中iOS Safari3.2+、Android Browser3.0+、Blackberry Browser7.0+、Opera Mobile14.0+、Chrome for Android25.0+都支持3D變換，但在使用時需要添加私有屬性-webkit-，Firefox for Android19.0+支持3D變換，武學添加瀏覽器私有屬性。

14.2.1 定義位移

在CSS3中，3D位移主要包括兩種函數translateZ()和translate3d()。translate3d()函數是一個元素在三維空間移動。語法如下：

translate3d(tx,ty,tz);

tx：代表橫向坐標位移向量的長度；
ty：代表縱向坐標位移向量的長度；
tz：代表Z軸位移向量的長度，不能為一個百分比值。

當tz值越大，元素離瀏覽者更近，視覺上元素變得更大；反之其值越小，元素離瀏覽者更遠。

translateZ()函數可以讓元素在Z軸進行位移，用法如下：

translateZ(t);

參數值指的是Z軸的向量位移長度。

使用translateZ()函數可以讓元素在Z軸進行位移，當其值為負值時，元素在Z軸越離越遠，元素變小；反之，當t為正值時，元素在Z軸上越移越近，元素變大。

在實際應用中，translateZ(t)函數等效於translate3d(0,0,tz)。

14.2.2 定義縮放

CSS3 3D縮放主要有scaleZ()和scale()兩種函數，當scale3d()中X軸和Y軸同時為1，即scale3d(1,1,sz)，效果等同於scaleZ(sz)。

默認值為1，當值大於1時，元素放大；反之小於1大於0.01時，元素縮小。語法如下：

scale3d(sx,sy,sz);

sx：橫向縮放比例；
sy：縱向縮放比例；
sz：Z軸縮放比例。

scaleZ(s);

s指元素每個點在Z軸的比例。

scaleZ(-1)定義了一個原點在Z軸的對稱點（按照元素的變換原點）。

scaleZ()和scale3d()函數單獨使用時沒有任何效果，需要配合其它的變換函數一起使用才有效果。

14.2.3 定義旋轉

在3D變換中，可以讓元素在任何軸旋轉。CSS3新增了3個旋轉函數：rotateX()、rotateY()和rotateZ()。基本語法為：

rotateX(a);
rotateY(a);
rotateZ(a);

a指的是一個旋轉角度值，可以是正值也可以是負值。正值表示元素圍繞軸順時針旋轉，反之逆時針旋轉。

還有一個rotate3d()函數，在3D空間，旋轉一個[x,y,z]向量並經過元素原點。語法如下：

rotate3d(x,y,z,a);

x、y、z是0到1之間的數值，主要用來描述元素圍繞X/Y/Z軸旋轉的矢量值；a是一個角度值，主要用來指定元素在3D空間旋轉的角度，為正值則元素順時針旋轉，反之逆時針旋轉。

14.3 設計過渡動畫

CSS3使用transition屬性定義過渡動畫，目前獲得所有瀏覽器支持。

14.3.1 設置過渡屬性

transition-property屬性用來定義過渡動畫的CSS屬性名稱，語法如下：

transition-property: none | all | [<IDENT> ] [ ‘,‘ <IDENT> ]*;

none：表示沒有元素；
all：默認值，表示針對所有元素，包括:before和:after偽元素；
IDENT：指定CSS屬性列表。

14.3.2 設置過渡時間

transition-duration屬性用來定義轉換動畫的時間長度，語法如下：

transition-duration:<time>[ ,<time>]*;

初始值為0，適用於所有元素，以及:before和:after偽元素。默認情況下，動畫過渡時間為0。

14.3.3 設置延遲時間

transition-delay屬性用來定義開啟過渡動畫的延遲時間，語法如下：

transition-delay:<time> [, <time>]*;

初始值為0，適用於所有元素，以及:before和:after偽元素。設置時間可以是正整數、負整數和零。設置為非零值時，必須帶上單位——s或ms。

為負數時，過渡動畫會從該時間點開始，之前的動畫會被截斷；

為正數時，過度動畫會延遲觸發。

14.3.4 設置過渡動畫類型

transition-timing-function屬性用來定義過渡動畫的類型，語法如下：

transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>,<number>,<number>,<number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>,<number>,<number>,<number>) ]*

ease：平滑過渡，等同於cubic-bezier(0.25,0.1,0.25,1.0)函數，即立方貝塞爾；
linear：線性過渡，等同於cubic-bezier(0,0,1.0,1.0)函數；
ease-in：由慢到快，等同於cubic-bezier(0,0,0.58,1.0)函數；
ease-out：由快到慢，等同於cubic-bezier(0.42,0,0.58,1.0)函數；
cubic-bezier：特殊的立方貝塞爾曲線效果。

14.3.5 設置觸發方式

CSS3動畫一般通過鼠標事件火莊臺定義動畫，如CSS偽類和JavaScript事件。

動態偽類	作用元素	說明
:link	只有鏈接	未訪問的鏈接
:visited	只有鏈接	訪問過的鏈接
:hober	所有元素	鼠標經過元素
:active	所有元素	鼠標點擊元素
:focus	所有可被選中的元素	元素被選中

JavaScript事件包括click、focus、mousemove、mouseover、mouseout等。

14.4 設計幀動畫

CSS3使用animation屬性定義幀動畫。最新版本主流瀏覽器均支持CSS幀動畫。

animation和transition屬性功能相同——通過改變元素的屬性值實現動畫效果。區別在於：

animations通過定義多個關鍵幀以及定義每個關鍵幀中元素的屬性值來實現更為復雜的動畫效果；

transitions通過指定屬性的開始值與結束值，以及這兩個屬性值之間進行過渡的方式，實現比較簡單的動畫效果。

14.4.1 設置關鍵幀

CSS3使用@keyframes定義關鍵幀，用法如下：

@keyframes animationname{
      keyframes-selector{
           css-styles;
      }
}

animationname：定義動畫的名稱；
keyframes-selector：定義幀的時間未知，也就是動畫時長的百分比，合法值有0~100%、from（等價於0%）、to（等價於100%）；
css-styles：表示一個或多個合法的CSS樣式屬性。

14.4.2 設置動畫屬性

定義動畫名稱
使用animation-name屬性定義CSS動畫名稱，語法如下：
```
animation-name:none | IDENT [, none | IDENT ]*;
```
初始值為none，定義一個適用的動畫列表。每個名字用來選擇關鍵幀，提供屬性值；如名稱為none，不會有動畫。
定義動畫時間
animation-duration定義動畫播放時間，語法如下：
```
animation-duration:<time> [, <time>]*;
```
默認值為0，不會有動畫。若為負值，視為0。

定義動畫類型

animation-timing-function定義動畫類型，語法如下：

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>,<number>,<number>,<number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>,<number>,<number>,<number>) ]*

初始值為ease，取值參考transition-timing-function。

定義延遲時間
animation-delay定義CSS動畫延遲播放的時間，參考transition-delay。
定義播放次數
animation-iteration-count屬性定義動畫播放的次數，語法如下：
```
animation-iteration-count:infinite | <number> [, infinite | <number>]*;
```
默認值為1，infinite表示無限次。如果取值為非整數，導致動畫結束一個周期的一部分；取值為負值，在交替周期內反向播放動畫。
定義播放方向
animation-direction屬性定義動畫的播放方向，語法如下：
```
animation-direction:normal | alternate [, normal | alternate]*;
```
默認值為normal。為normal時，動畫的每次循環向前播放；為alternate時，偶數次向前播放，奇數次向反方向播放。
定義播放狀態
animation-play-state定義動畫正在運行還是暫停，語法如下：
```
animation-play-state: paused | running;
```
初始值為running，paused定義動畫暫停，running定義動畫正在播放。
定義播放外狀態
使用animation-fill-mode屬性定義動畫外狀態，語法如下：
```
animation-fill-mode: none | forwards | backwards | both [, none | forwards | backwards | both ]*;
```
初始值為none，如果提供多個屬性值，以逗號分隔。取值說明如下：
- none：不設置動畫外的狀態；
- forwards：設置對象狀態為動畫結束時的狀態；
- backwards：設置對象狀態為動畫開始時的狀態；
- both：設置對象狀態為動畫結束或開始的狀態。

學習筆記第十四章使用CSS3動畫

進行 delay 簡單的 angle 新版 chrome tor 3.0 :focus 第14章使用CSS3動畫【學習重點】設計2D動畫設計3D動畫設計過渡動畫設計幀動畫能夠使用CSS3動畫功能設計頁面特效樣式 14.1 設計2D動畫 CSS2D T

學習筆記 第十四章 使用CSS3動畫

第14章 使用CSS3動畫

【學習重點】

14.1 設計2D動畫

14.1.1 定義旋轉

14.1.2 定義縮放

14.1.3 定義移動

14.1.4 定義傾斜

14.1.5 定義矩陣

14.1.6 定義變換原點

14.2 設計3D變換

14.2.1 定義位移

14.2.2 定義縮放

14.2.3 定義旋轉

14.3 設計過渡動畫

14.3.1 設置過渡屬性

14.3.2 設置過渡時間

14.3.3 設置延遲時間

14.3.4 設置過渡動畫類型

14.3.5 設置觸發方式

14.4 設計幀動畫

14.4.1 設置關鍵幀

14.4.2 設置動畫屬性

相關推薦

學習筆記第十四章使用CSS3動畫

第14章使用CSS3動畫