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

rotate

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

transform: rotate(x);

參數(shù)x必須是以deg結(jié)尾的角度數(shù)或0，可為負數(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方向逆時針傾斜角度a，y方向順時針傾斜角度b

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

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

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

matrix

設(shè)置元素的變形矩陣，因為矩陣變形過于復雜，暫略。

origin

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

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

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

transition-property

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

transition-duration

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

transition-timing-function

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

transition-delay

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

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

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

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

@keyframesNAME {

         a% {

         /*CSS屬性*/

         }

         b% {

                  /*CSS屬性*/

         }

         ...

}

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

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

animation-name

指定選用的動畫的名字，即keyframes中的NAME。

animation-duration

同transition-duration。

animation-timing-function

同transition-timing-function。

animation-delay

同transition-delay。

animation-iteration-count

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

animation-direction

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

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

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

HTML代碼：

animation.css

最新評論