CSS3添加了幾個(gè)動(dòng)畫(huà)效果的屬性，通過(guò)設(shè)置這些屬性，可以做出一些簡(jiǎn)單的動(dòng)畫(huà)效果而不需要再去借助JavaScript。CSS3動(dòng)畫(huà)的屬性主要分為三類(lèi)：transform、transition以及animation。

rotate

設(shè)置元素順時(shí)針旋轉(zhuǎn)的角度，用法是：

transform: rotate(x);

參數(shù)x必須是以deg結(jié)尾的角度數(shù)或0，可為負(fù)數(shù)表示反向。

scale

設(shè)置元素放大或縮小的倍數(shù)，用法包括：

transform: scale(a);                  元素x和y方向均縮放a倍

transform: scale(a, b);              元素x方向縮放a倍，y方向縮放b倍

transform: scaleX(a);                元素x方向縮放a倍，y方向不變

transform: scaleY(b);                元素y方向縮放b倍，x方向不變

translate

設(shè)置元素的位移，用法為：

transform: translate(a, b);                元素x方向位移a，y方向位移b

transform: translateX(a);                  元素x方向位移a，y方向不變

transform: translateY(b);                  元素y方向位移b，x方向不變

skew

設(shè)置元素傾斜的角度，用法包括：

transform: skew(a, b);              元素x方向逆時(shí)針傾斜角度a，y方向順時(shí)針傾斜角度b

transform: skewX(a);                元素x方向逆時(shí)針傾斜角度a，y方向不變

transform: skewY(b);                元素y方向順時(shí)針傾斜角度b，想方向不變

以上的參數(shù)均必須是以deg結(jié)尾的角度數(shù)或0，可為負(fù)數(shù)表示反向。

matrix

設(shè)置元素的變形矩陣，因?yàn)榫仃囎冃芜^(guò)于復(fù)雜，暫略。

origin

設(shè)置元素的懸掛點(diǎn)，用法包括：

transform-origin: a b;                元素的懸掛點(diǎn)為(a, b)

元素的懸掛點(diǎn)即為它旋轉(zhuǎn)和傾斜時(shí)的中心點(diǎn)。取值中的a、b可以是長(zhǎng)度值、以%結(jié)尾的百分比或者left、top、right、bottom四個(gè)值。

transition-property

指定transition效果作用的CSS屬性，其值是CSS屬性名。

transition-duration

動(dòng)畫(huà)效果持續(xù)的時(shí)間，其值為以s結(jié)尾的秒數(shù)。

transition-timing-function

指定元素狀態(tài)的變化速率函數(shù)，其取值基于貝賽爾曲線(xiàn)函數(shù)，詳情如下所示：

transition-delay

動(dòng)畫(huà)效果推遲開(kāi)始執(zhí)行的時(shí)間，其值為以s結(jié)尾的秒數(shù)。

CSS3動(dòng)畫(huà)的生命周期如下圖所示，從中可以清楚的看出duration和delay之間的關(guān)系：

CSS3中真正的動(dòng)畫(huà)屬性是animation，而前面的transform和transition都只是對(duì)DOM元素的變形或者是狀態(tài)的過(guò)渡。實(shí)際上，CSS3所支持的動(dòng)畫(huà)效果只是填充動(dòng)畫(huà)，也就是說(shuō)先設(shè)定整個(gè)動(dòng)畫(huà)生命周期中的幾個(gè)關(guān)鍵狀態(tài)（key  frame，關(guān)鍵幀），然后動(dòng)畫(huà)將自行計(jì)算并模擬關(guān)鍵幀之間的過(guò)渡。那么在設(shè)置animation的屬性之前就必須先設(shè)定好關(guān)鍵幀了。

關(guān)鍵幀@keyframes的語(yǔ)法結(jié)構(gòu)如下：

@keyframesNAME {

         a% {

         /*CSS屬性*/

         }

         b% {

                  /*CSS屬性*/

         }

         ...

}

NAME表示動(dòng)畫(huà)的名字；a%、b%表示以百分號(hào)結(jié)尾的百分?jǐn)?shù)，用于設(shè)定該關(guān)鍵幀在動(dòng)畫(huà)生命周期中的位置；百分?jǐn)?shù)后面的{ } 中則需要寫(xiě)成該關(guān)鍵幀狀態(tài)下CSS屬性的值。另外，如果同一個(gè)百分?jǐn)?shù)值在@keyframes中出現(xiàn)多次，那么后出現(xiàn)的將覆蓋先出現(xiàn)的；并且關(guān)鍵幀在@keyframes中時(shí)無(wú)序的。

設(shè)置完關(guān)鍵幀后就可以繼續(xù)設(shè)定animation了。

animation-name

指定選用的動(dòng)畫(huà)的名字，即keyframes中的NAME。

animation-duration

同transition-duration。

animation-timing-function

同transition-timing-function。

animation-delay

同transition-delay。

animation-iteration-count

設(shè)定動(dòng)畫(huà)執(zhí)行的次數(shù)，其值可以是數(shù)字也可以是infinite（循環(huán)執(zhí)行）。

animation-direction

設(shè)定動(dòng)畫(huà)執(zhí)行的方向，其值可以是normal（正常順序播放）或alternate（反向播放）。

因?yàn)镃SS3還沒(méi)有正式發(fā)布，所以各種瀏覽器對(duì)它的支持也不盡相同。所以在設(shè)置CSS3屬性（包括@開(kāi)頭的新屬性）的時(shí)候通常需要對(duì)其添加瀏覽器標(biāo)識(shí)的前綴，如-webkit- 表示W(wǎng)ebkit內(nèi)核的瀏覽器Chrome和Safari，-moz- 表示Fire Fox，-o- 表示Opera。無(wú)視IE吧，在IE上的實(shí)現(xiàn)通常還是要用到濾鏡，而不是CSS3。

下面的代碼模擬了上述大部分的CSS3動(dòng)畫(huà)屬性，由于只使用了–webkit- 前綴，所以只能在Chrome或Safari下正常運(yùn)行。

HTML代碼：

發(fā)表評(píng)論 共有條評(píng)論 用戶(hù)名: 密碼: 驗(yàn)證碼: 匿名發(fā)表