現(xiàn)在經(jīng)常會(huì)看到一些門戶網(wǎng)站的專題使用到CSS3的動(dòng)畫，咋也不能落伍，在此這梳理下動(dòng)畫知識(shí)吧，便于后面用到。接下來(lái)介紹下Animation動(dòng)畫的定義和調(diào)用，在介紹Animation之前需要了解下Keyframes，英文意思就是關(guān)鍵幀，它相當(dāng)于我們flash里面的幀。

Keyframes具有其自己的語(yǔ)法規(guī)則，他的命名是由"@keyframes"開(kāi)頭，后面緊接著是這個(gè)“動(dòng)畫的名稱”加上一對(duì)花括號(hào)“{}”，括號(hào)中就是一些不同時(shí)間段樣式

規(guī)則，有點(diǎn)像我們css的樣式寫法一樣。對(duì)于一個(gè)"@keyframes"中的樣式規(guī)則是由多個(gè)百分比構(gòu)成的，如“0%”到"100%"之間，我們可以在

這個(gè)規(guī)則中創(chuàng)建多個(gè)百分比，我們分別給每一個(gè)百分比中給需要有動(dòng)畫效果的元素加上不同的屬性，從而讓元素達(dá)到一種在不斷變化的效果，比如說(shuō)移動(dòng)，改變?cè)?/p>

顏色，位置，大小，形狀等，不過(guò)有一點(diǎn)需要注意的是，我們可以使用“fromt”“to”來(lái)代表一個(gè)動(dòng)畫是從哪開(kāi)始，到哪結(jié)束，也就是說(shuō)這個(gè)

"from"就相當(dāng)于"0%"而"to"相當(dāng)于"100%",值得一說(shuō)的是，其中"0%"不能像別的屬性取值一樣把百分比符號(hào)省略，我們?cè)谶@里必須加上百

分符號(hào)(“%”)如果沒(méi)有加上的話，我們這個(gè)keyframes是無(wú)效的，不起任何作用。因?yàn)閗eyframes的單位只接受百分比值。

Keyframes可以指定任何順序排列來(lái)決定Animation動(dòng)畫變化的關(guān)鍵位置。其具體語(yǔ)法規(guī)則如下：keyframes-rule:?'@keyframes'?IDENT?'{'?keyframes-blocks?'}';

keyframes-blocks:?[?keyframe-selectors?block?]*?;

keyframe-selectors:?[?'from'?|?'to'?|?PERCENTAGE?]?[?','?[?'from'?|?'to'?|?PERCENTAGE?]?]*;

none:表示不進(jìn)么變換；表示一個(gè)或多個(gè)變換函數(shù)，以空格分開(kāi)；換句話說(shuō)就是我們同時(shí)對(duì)一

個(gè)元素進(jìn)行transform的多種屬性操作，例如rotate、scale、translate三種，但這里需要提醒大家的，以往我們疊加效果都是用逗

號(hào)(“，”)隔開(kāi)，但transform中使用多個(gè)屬性時(shí)卻需要有空格隔開(kāi)。大家記住了是空格隔開(kāi)。

取值：

transform屬性實(shí)現(xiàn)了一些可用SVG實(shí)現(xiàn)的同樣的功能。它可用于內(nèi)聯(lián)(inline)元素和塊級(jí)(block)元素。它允許我們旋轉(zhuǎn)、縮放

和移動(dòng)元素

，他有幾個(gè)屬性值參數(shù)：rotate;translate;scale;skew;matrix。下面我們分別來(lái)介紹這幾個(gè)屬性值參數(shù)的具體使用方法：

我把上面的語(yǔ)法綜合起來(lái)@keyframes?IDENT?{

from?{

Properties:Properties?value;

}

Percentage?{

Properties:Properties?value;

}

to?{

Properties:Properties?value;

}

}

其中IDENT是一個(gè)動(dòng)畫名稱，你可以隨便取，當(dāng)然語(yǔ)義化一點(diǎn)更好，Percentage是百分比值，我們可以添加許多個(gè)這樣的百

分比，Properties為css的屬性名，比如說(shuō)left,background等，value就是相對(duì)應(yīng)的屬性的屬性值。值得一提的是，我們

from和to

分別對(duì)應(yīng)的是0%和100%。這個(gè)我們?cè)谇懊嬉蔡岬竭^(guò)了。到目前為止支技animation動(dòng)畫的只有webkit內(nèi)核的瀏覽器，所以我需要在上面的基礎(chǔ)

上加上-webkit前綴，據(jù)說(shuō)Firefox5可以支持css3的 animation動(dòng)畫屬性。

舉個(gè)官方實(shí)例來(lái)，大伙就可以看得很清楚了，如下：@-webkit-keyframes?'wobble'?{

0%?{

margin-left:?100px;

background:?green;

}

40%?{

margin-left:?150px;

background:?orange;

}

60%?{

margin-left:?75px;

background:?blue;

}

100%?{

margin-left:?100px;

background:?red;

}

}

這里我們定義了一個(gè)叫“wobble”的動(dòng)畫，他的動(dòng)畫是從0%開(kāi)始到100%時(shí)結(jié)束，從中還經(jīng)歷了一個(gè)40%和60%兩個(gè)過(guò)程，上面代碼具體意思

是：wobble動(dòng)畫在0%時(shí)元素定位到left為100px的位置背景色為green，然后40%時(shí)元素過(guò)渡到left為150px的位置并且背景色為

orange，60%時(shí)元素過(guò)渡到left為75px的位置,背景色為blue，最后100%結(jié)束動(dòng)畫的位置元素又回到起點(diǎn)left為100px處,背景

色變成red。

定義好動(dòng)畫，如何調(diào)用呢，如下：.box?{

width:?50px;

height:?50px;

margin-left:?100px;

background:?blue;

-webkit-animation-name:'wobble';/*動(dòng)畫屬性名，也就是我們前面keyframes定義的動(dòng)畫名*/

-webkit-animation-duration:?10s;/*動(dòng)畫持續(xù)時(shí)間*/

-webkit-animation-timing-function:?ease-in-out;?/*動(dòng)畫頻率，和transition-timing-function是一樣的*/

-webkit-animation-delay:?2s;/*動(dòng)畫延遲時(shí)間*/

-webkit-animation-iteration-count:?10;/*定義循環(huán)資料，infinite為無(wú)限次*/

-webkit-animation-direction:?alternate;/*定義動(dòng)畫方式*/

}

可能大伙看到上面不是很了解，我們看下其屬性的語(yǔ)法，再回來(lái)看這個(gè)例子就很清楚了

一、animation-name:

語(yǔ)法：animation-name:?none?|?IDENT[,none?|?IDENT]*;

取值說(shuō)明：

animation-name:是用來(lái)定義一個(gè)動(dòng)畫的名稱，其主要有

兩個(gè)值：IDENT是由Keyframes創(chuàng)建的動(dòng)畫名，換句話說(shuō)此處的IDENT要和Keyframes中的IDENT一致，如果不一致,將不能實(shí)現(xiàn)任

何動(dòng)畫效果；none為默認(rèn)值，當(dāng)值為none時(shí)，將沒(méi)有任何動(dòng)畫效果。另外我們這個(gè)屬性跟前面所講的transition一樣，我們可以同時(shí)附幾個(gè)

animation給一個(gè)元素，我們只需要用逗號(hào)“，”隔開(kāi)。

二、animation-duration：

語(yǔ)法：animation-duration:?[,]*

取值說(shuō)明：

animation-duration是用來(lái)指定元素播放動(dòng)畫所持續(xù)的時(shí)間長(zhǎng)，取值:為數(shù)值，單位為s (秒.)其默認(rèn)值為“0”。這個(gè)屬性跟transition中的transition-duration使用方法是一樣的。

三、animation-timing-function:

語(yǔ)法：animation-timing-function:ease?|?linear?|?ease-in?|?ease-out?|?ease-in-out?|?cubic-bezier(,?,?,?)?[,?ease?|?linear?|?ease-in?|?ease-out?|?ease-in-out?|?cubic-bezier(,?,?,?)]*

取值說(shuō)明：

animation-timing-function:是指元素根據(jù)時(shí)間的推進(jìn)來(lái)改變屬性值的變換速率，說(shuō)得簡(jiǎn)單點(diǎn)就是動(dòng)畫的播放方式。他和transition中的transition-timing-function一樣，具有以下六種變換方式：ease;ease-in;ease-in-out;linear;cubic-bezier。具體的使用方法如下：

transition-timing-function的值允許你根據(jù)時(shí)間的推進(jìn)去改變屬性值的變換速率，transition-timing-function有6個(gè)可能值：

1、ease：(逐漸變慢)默認(rèn)值，ease函數(shù)等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0).

2、linear：(勻速)，linear 函數(shù)等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0).

3、ease-in：(加速)，ease-in 函數(shù)等同于貝塞爾曲線(0.42, 0, 1.0, 1.0).

4、ease-out：(減速)，ease-out 函數(shù)等同于貝塞爾曲線(0, 0, 0.58, 1.0).

5、ease-in-out：(加速然后減速)，ease-in-out 函數(shù)等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)

6、cubic-bezier：(該值允許你去自定義一個(gè)時(shí)間曲線)， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個(gè)值特定于曲線上點(diǎn)P1和點(diǎn)P2。所有值需在[0, 1]區(qū)域內(nèi)，否則無(wú)效。

其是cubic-bezier為通過(guò)貝賽爾曲線來(lái)計(jì)算“轉(zhuǎn)換”過(guò)程中的屬性值，如下曲線所示，通過(guò)改變P1(x1, y1)和P2(x2, y2)的坐標(biāo)可以改變整個(gè)過(guò)程的Output Percentage。初始默認(rèn)值為default.

四、animation-delay:

語(yǔ)法：animation-delay:?[,]*

取值說(shuō)明：

animation-delay:是用來(lái)指定元素動(dòng)畫開(kāi)始時(shí)間。取值為為數(shù)值，單位為s(秒)，其默認(rèn)值也是0。這個(gè)屬性和transition-delayy使用方法是一樣的。

五、animation-iteration-count

語(yǔ)法：animation-iteration-count:infinite?|??[,?infinite?|?]*

取值說(shuō)明：

animation-iteration-count是用來(lái)指定元素播放動(dòng)畫的循環(huán)次數(shù)，其可以取值為數(shù)字，其默認(rèn)值為“1”；infinite為無(wú)限次數(shù)循環(huán)。

六、animation-direction

語(yǔ)法：animation-direction:?normal?|?alternate?[,?normal?|?alternate]*

取值說(shuō)明：

animation-direction是用來(lái)指定元素動(dòng)畫播放的方向，其只有兩個(gè)值，默認(rèn)值為normal，如果設(shè)置為normal時(shí)，動(dòng)畫的每次循環(huán)都是向前播放；另一個(gè)值是alternate，他的作用是，動(dòng)畫播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。

七、animation-play-state

語(yǔ)法：animation-play-state:running?|?paused?[,?running?|?paused]*

取值說(shuō)明：

animation-play-state主要是用來(lái)控制元素動(dòng)畫的

播放狀態(tài)。其主要有兩個(gè)值，running和paused其中running為默認(rèn)值。他們的作用就類似于我們的音樂(lè)播放器一樣，可以通過(guò)paused將

正在播放的動(dòng)畫停下了，也可以通過(guò)running將暫停的動(dòng)畫重新播放，我們這里的重新播放不一定是從元素動(dòng)畫的開(kāi)始播放，而是從你暫停的那個(gè)位置開(kāi)始播

放。另外如果暫時(shí)了動(dòng)畫的播放，元素的樣式將回到最原始設(shè)置狀態(tài)。這個(gè)屬性目前很少內(nèi)核支持，所以只是稍微提一下。

上面我們分別介紹了animation中的各個(gè)屬性的語(yǔ)法和取值，那么我們綜合上面的內(nèi)容可以給animation屬性一個(gè)速記法：animation:[?||??||??||??||??||?]?[,?[?||??||??||??||??||?]?]*

如下圖所示

相信大家看完語(yǔ)法后，應(yīng)該對(duì)于上面的例子很清楚了吧。不過(guò)話說(shuō)回來(lái)動(dòng)畫是可以做了，但兼容它的瀏覽器不多啊，目前只有蘋果，谷歌，火狐支持。

好啦，了解完這些就可以應(yīng)用到實(shí)際應(yīng)用中了。

總結(jié)

以上是生活随笔為你收集整理的css动画定义,CSS3中Animation动画的定义和调用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。