CSS3屬性中有關(guān)于制作動(dòng)畫的三個(gè)屬性：Transform,Transition,Animation；我們一起學(xué)習(xí)完了Transform和Transition，讓我們對(duì)元素實(shí)現(xiàn)了一些基本的動(dòng)畫效果，這些我想足以讓大家激動(dòng)了一陣子，今天我們趁著這個(gè)熱勁繼續(xù)第三個(gè)動(dòng)畫屬性Animation的學(xué)習(xí)，單從Animation字面上的意思，我們就知道是“動(dòng)畫”的意思。但CSS3中的Animation與HTML5中的Canvas繪制動(dòng)畫又不同，Animation只應(yīng)用在頁面上已存在的DOM元素上，而且他跟Flash和JavaScript以及jQuery制作出來的動(dòng)畫效果又不一樣，因?yàn)槲覀兪褂肅SS3的Animation制作動(dòng)畫我們可以省去復(fù)雜的js,jquery代碼（像我這種不懂js的人來說是件很高興的事了），只是有一點(diǎn)不足之處，我們運(yùn)用Animation能創(chuàng)建自己想要的一些動(dòng)畫效果，但是有點(diǎn)粗糙，如果想要制作比較好的動(dòng)畫，我見意大家還是使用flash或js等。雖然說Animation制作出來的動(dòng)畫簡(jiǎn)單粗糙，但我想還是不能減少我們大家對(duì)其學(xué)習(xí)的熱情。
在開始介紹Animation之前我們有必要先來了解一個(gè)特殊的東西，那就是"Keyframes",我們把他叫做“關(guān)鍵幀”，玩過flash的朋友可能對(duì)這個(gè)東西并不會(huì)陌生。下面我們就一起來看看這個(gè)“Keyframes”是什么東西。前面我們?cè)谑褂胻ransition制作一個(gè)簡(jiǎn)單的transition效果時(shí)，我們包括了初始屬性和最終屬性，一個(gè)開始執(zhí)行動(dòng)作時(shí)間和一個(gè)延續(xù)動(dòng)作時(shí)間以及動(dòng)作的變換速率，其實(shí)這些值都是一個(gè)中間值，如果我們要控制的更細(xì)一些，比如說我要第一個(gè)時(shí)間段執(zhí)行什么動(dòng)作，第二個(gè)時(shí)間段執(zhí)行什么動(dòng)作（換到flash中說，就是第一幀我要執(zhí)行什么動(dòng)作，第二幀我要執(zhí)行什么動(dòng)作），這樣我們用Transition就很難實(shí)現(xiàn)了，此時(shí)我們也需要這樣的一個(gè)“關(guān)鍵幀”來控制。那么CSS3的Animation就是由“keyframes”這個(gè)屬性來實(shí)現(xiàn)這樣的效果。下面我們一起先來看看Keyframes:
Keyframes具有其自己的語法規(guī)則，他的命名是由"@keyframes"開頭，后面緊接著是這個(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á)到一種在不斷變化的效果，比如說移動(dòng)，改變?cè)仡伾?，位置，大小，形狀等，不過有一點(diǎn)需要注意的是，我們可以使用“fromt”“to”來代表一個(gè)動(dòng)畫是從哪開始，到哪結(jié)束，也就是說這個(gè) "from"就相當(dāng)于"0%"而"to"相當(dāng)于"100%",值得一說的是，其中"0%"不能像別的屬性取值一樣把百分比符號(hào)省略，我們?cè)谶@里必須加上百分符號(hào)（“%”）如果沒有加上的話，我們這個(gè)keyframes是無效的，不起任何作用。因?yàn)閗eyframes的單位只接受百分比值。
Keyframes可以指定任何順序排列來決定Animation動(dòng)畫變化的關(guān)鍵位置。其具體語法規(guī)則如下：
keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}'; keyframes-blocks: [ keyframe-selectors block ]* ; keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;
我把上面的語法綜合起來
@keyframes IDENT { from { Properties:Properties value; } Percentage { Properties:Properties value; } to { Properties:Properties value; } } 或者全部寫成百分比的形式： @keyframes IDENT { 0% { Properties:Properties value; } Percentage { Properties:Properties value; } 100% { Properties:Properties value; } }
其中IDENT是一個(gè)動(dòng)畫名稱，你可以隨便取，當(dāng)然語義化一點(diǎn)更好，Percentage是百分比值，我們可以添加許多個(gè)這樣的百分比，Properties為css的屬性名，比如說left,background等，value就是相對(duì)應(yīng)的屬性的屬性值。值得一提的是，我們from和to 分別對(duì)應(yīng)的是0%和100%。這個(gè)我們?cè)谇懊嬉蔡岬竭^了。到目前為止支技animation動(dòng)畫的只有webkit內(nèi)核的瀏覽器，所以我需要在上面的基礎(chǔ)上加上-webkit前綴，據(jù)說Firefox5可以支持css3的 animation動(dòng)畫屬性。
我們來看一個(gè)W3C官網(wǎng)的實(shí)例
@-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%開始到100%時(shí)結(jié)束，從中還經(jīng)歷了一個(gè)40%和60%兩個(gè)過程，上面代碼具體意思是：wobble動(dòng)畫在0%時(shí)元素定位到left為100px的位置背景色為green，然后40%時(shí)元素過渡到left為150px的位置并且背景色為orange，60%時(shí)元素過渡到left為75px的位置,背景色為blue，最后100%結(jié)束動(dòng)畫的位置元素又回到起點(diǎn)left為100px處,背景色變成red。假設(shè)置我們只給這個(gè)動(dòng)畫有10s的執(zhí)行時(shí)間，那么他每一段執(zhí)行的狀態(tài)如下圖所示：
Keyframes定義好了以后，我們需要怎么去調(diào)用剛才定義好的動(dòng)畫“wobble”
CSS3的animation類似于transition屬性，他們都是隨著時(shí)間改變?cè)氐膶傩灾?。他們主要區(qū)別是transition需要觸發(fā)一個(gè)事件(hover事件或click事件等)才會(huì)隨時(shí)間改變其css屬性；而animation在不需要觸發(fā)任何事件的情況下也可以顯式的隨著時(shí)間變化來改變?cè)豤ss的屬性值，從而達(dá)到一種動(dòng)畫的效果。這樣我們就可以直接在一個(gè)元素中調(diào)用animation的動(dòng)畫屬性,基于這一點(diǎn)，css3的animation就需要明確的動(dòng)畫屬性值，這也就是回到我們上面所說的，我們需要keyframes來定義不同時(shí)間的css屬性值,達(dá)到元素在不同時(shí)間段變化的效果。
下面我們來看看怎么給一個(gè)元素調(diào)用animation屬性
.demo1 { 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為無限次*/ -webkit-animation-direction: alternate;/*定義動(dòng)畫方式*/ }
CSS Animation動(dòng)畫效果將會(huì)影響元素相對(duì)應(yīng)的css值，在整個(gè)動(dòng)畫過程中，元素的變化屬性值完全是由animation來控制，動(dòng)畫后面的會(huì)覆蓋前面的屬性值。如上面例子：因?yàn)槲覀冞@個(gè)demo只是在不同的時(shí)間段改變了demo1的背景色和左邊距，其默認(rèn)值是：margin-left:100px;background: blue；但當(dāng)我們?cè)趫?zhí)行動(dòng)畫0%時(shí)，margin-left:100px,background:green；當(dāng)執(zhí)行到40%時(shí)，屬性變成了：margin-left:150px;background:orange;當(dāng)執(zhí)行到60%時(shí)margin-left:75px;background:blue;當(dāng)動(dòng)畫 執(zhí)行到100%時(shí)：margin-left:100px;background: red;此時(shí)動(dòng)畫將完成，那么margin-left和background兩個(gè)屬性值將是以100%時(shí)的為主,他不會(huì)產(chǎn)生疊加效果，只是一次一次覆蓋前一次出將的css屬性。就如我們平時(shí)的css一樣，最后出現(xiàn)的權(quán)根是最大的。當(dāng)動(dòng)畫結(jié)束后，樣式回到默認(rèn)效果。
我們可以看一張來自w3c官網(wǎng)有關(guān)于css3的animation對(duì)屬性變化的過程示意圖
從上面的Demo中我們可以看出animation和transition一樣有自己相對(duì)應(yīng)的屬性，那么在animation主要有以下幾種：animation-name;animation-duration;animation-timing-function;animation-delay;animation-iteration-count;animation-direction;animation-play-state。下面我們分別來看看這幾個(gè)屬性的使用
一、animation-name:
語法：
animation-name: none | IDENT[,none | IDENT]*;
取值說明：
animation-name:是用來定義一個(gè)動(dòng)畫的名稱，其主要有兩個(gè)值：IDENT是由Keyframes創(chuàng)建的動(dòng)畫名，換句話說此處的IDENT要和Keyframes中的IDENT一致，如果不一致,將不能實(shí)現(xiàn)任何動(dòng)畫效果；none為默認(rèn)值，當(dāng)值為none時(shí)，將沒有任何動(dòng)畫效果。另外我們這個(gè)屬性跟前面所講的transition一樣，我們可以同時(shí)附幾個(gè)animation給一個(gè)元素，我們只需要用逗號(hào)“，”隔開。
二、animation-duration：
語法：
animation-duration: <time>[,<time>]*
取值說明：
animation-duration是用來指定元素播放動(dòng)畫所持續(xù)的時(shí)間長，取值:<time>為數(shù)值，單位為s （秒.）其默認(rèn)值為“0”。這個(gè)屬性跟transition中的transition-duration使用方法是一樣的。
三、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>)]*
取值說明：
animation-timing-function:是指元素根據(jù)時(shí)間的推進(jìn)來改變屬性值的變換速率，說得簡(jiǎn)單點(diǎn)就是動(dòng)畫的播放方式。他和transition中的transition-timing-function一樣，具有以下六種變換方式：ease;ease-in;ease-in-out;linear;cubic-bezier。具體的使用方法大家可以點(diǎn)這里，查看其中transition-timing-function的使用方法。
四、animation-delay:
語法：
animation-delay: <time>[,<time>]*
取值說明：
animation-delay:是用來指定元素動(dòng)畫開始時(shí)間。取值為<time>為數(shù)值，單位為s(秒)，其默認(rèn)值也是0。這個(gè)屬性和transition-delayy使用方法是一樣的。
五、animation-iteration-count
語法：
animation-iteration-count:infinite | <number> [, infinite | <number>]*
取值說明：
animation-iteration-count是用來指定元素播放動(dòng)畫的循環(huán)次數(shù)，其可以取值<number>為數(shù)字，其默認(rèn)值為“1”；infinite為無限次數(shù)循環(huán)。
六、animation-direction
語法：
animation-direction: normal | alternate [, normal | alternate]*
取值說明：
animation-direction是用來指定元素動(dòng)畫播放的方向，其只有兩個(gè)值，默認(rèn)值為normal，如果設(shè)置為normal時(shí)，動(dòng)畫的每次循環(huán)都是向前播放；另一個(gè)值是alternate，他的作用是，動(dòng)畫播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。
七、animation-play-state
語法：
animation-play-state:running | paused [, running | paused]*
取值說明：
animation-play-state主要是用來控制元素動(dòng)畫的播放狀態(tài)。其主要有兩個(gè)值，running和paused其中running為默認(rèn)值。他們的作用就類似于我們的音樂播放器一樣，可以通過paused將正在播放的動(dòng)畫停下了，也可以通過running將暫停的動(dòng)畫重新播放，我們這里的重新播放不一定是從元素動(dòng)畫的開始播放，而是從你暫停的那個(gè)位置開始播放。另外如果暫時(shí)了動(dòng)畫的播放，元素的樣式將回到最原始設(shè)置狀態(tài)。這個(gè)屬性目前很少內(nèi)核支持，所以只是稍微提一下。
上面我們分別介紹了animation中的各個(gè)屬性的語法和取值，那么我們綜合上面的內(nèi)容可以給animation屬性一個(gè)速記法：
animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*
如下圖所示
兼容的瀏覽器
前面我也簡(jiǎn)單的提過，CSS3的animation到目前為止只支持webkit內(nèi)核的瀏覽器，因?yàn)樽钤缣岢鲞@個(gè)屬性的就是safari公司,據(jù)說Firefox5.0+將支持Animation。如圖所示
那么到此為止，我們主要一起學(xué)習(xí)了有關(guān)animation的理論知識(shí)，下面我們一起來看兩個(gè)實(shí)例制作過程，來加強(qiáng)對(duì)animation的實(shí)踐能力
DEMO一：發(fā)光變色的button
我們這個(gè)demo主要是通過在keyframes中改變?cè)氐腷ackground;color;box-shadow三個(gè)屬性，來達(dá)到一種發(fā)光變色的button效果，我們來看看其實(shí)現(xiàn)代碼
HTML Code:
<a href="" class="btn">發(fā)光的button</a>
CSS Code
/*給這個(gè)按鈕創(chuàng)建一個(gè)動(dòng)名名稱：buttonLight，然后在每個(gè)時(shí)間段設(shè)置不同的background,color來達(dá)到變色效果，改變box-shadow來達(dá)到發(fā)光效果*/ @-webkit-keyframes 'buttonLight' { from { background: rgba(96, 203, 27,0.5); -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset, 0 0 3px rgba(220, 120, 200, 0.5); color: red; } 25% { background: rgba(196, 203, 27,0.8); -webkit-box-shadow: 0 0 10px rgba(255, 155, 255, 0.5) inset, 0 0 8px rgba(120, 120, 200, 0.8); color: blue; } 50% { background: rgba(196, 203, 127,1); -webkit-box-shadow: 0 0 5px rgba(155, 255, 255, 0.3) inset, 0 0 3px rgba(220, 120, 100, 1); color: orange; } 75% { background: rgba(196, 203, 27,0.8); -webkit-box-shadow: 0 0 10px rgba(255, 155, 255, 0.5) inset, 0 0 8px rgba(120, 120, 200, 0.8); color: black; } to { background: rgba(96, 203, 27,0.5); -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) inset, 0 0 3px rgba(220, 120, 200, 0.5); color: green; } } a.btn { /*按鈕的基本屬性*/ background: #60cb1b; font-size: 16px; padding: 10px 15px; color: #fff; text-align: center; text-decoration: none; font-weight: bold; text-shadow: 0 -1px 1px rgba(0,0,0,0.3); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8); -webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8); box-shadow: 0 0 5px rgba(255, 255, 255, 0.6) inset, 0 0 3px rgba(220, 120, 200, 0.8); /*調(diào)用animation屬性，從而讓按鈕在載入頁面時(shí)就具有動(dòng)畫效果*/ -webkit-animation-name: "buttonLight"; /*動(dòng)畫名稱，需要跟@keyframes定義的名稱一致*/ -webkit-animation-duration: 5s;/*動(dòng)畫持續(xù)的時(shí)間長*/ -webkit-animation-iteration-count: infinite;/*動(dòng)畫循環(huán)播放的次數(shù)*/ }
效果：
為了更好的看出這個(gè)demo的效果，你可以把上面的代碼復(fù)制到你本過的頁面上，并使用safari和chrome，你會(huì)覺得很有意思，整個(gè)按鈕好像在不停的呼吸一樣。
Demo二：方形旋轉(zhuǎn)變成圓型
我們這個(gè)demo是通過transform的rotate和border-radius不同值，把一個(gè)方型圖片隨著時(shí)間的推移，慢慢的轉(zhuǎn)換成了個(gè)圓型效果，下面我們來看看其具體實(shí)現(xiàn)的效果
HTML Code:
<a href="#" class="box"></a> <span class="click-btn">Click</span>
CSS Code:
/*定義方型轉(zhuǎn)化為圓型的動(dòng)畫round*/ @-webkit-keyframes 'round' { from{ -webkit-transform: rotate(36deg); -webkit-border-radius: 2px; } 10%{ -webkit-transform: rotate(72deg); -webkit-border-radius: 4px; } 20% { -webkit-transform: rotate(108deg); -webkit-border-radius: 6px; } 30% { -webkit-transform: rotate(144deg); -webkit-border-radius: 9px; } 40%{ -webkit-transform: rotate(180deg); -webkit-border-radius: 12px; } 50%{ -webkit-transform: rotate(216deg); -webkit-border-radius: 14px; } 60% { -webkit-transform: rotate(252deg); -webkit-border-radius: 16px; } 70% { -webkit-transform: rotate(288deg); -webkit-border-radius: 19px; } 80%{ -webkit-transform: rotate(324deg); -webkit-border-radius: 22px; } to { -webkit-transform: rotate(360deg); -webkit-border-radius: 25px; }} /*給方型box一個(gè)初步樣式*/ a.box { display: block; width: 50px; height: 50px; background: red; margin-bottom: 20px; } /*圓型box的樣式，并在這里應(yīng)用animation*/ a.round { -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; background: green; -webkit-animation-name: 'round'; /*動(dòng)畫名稱*/ -webkit-animation-duration: 60s;/*播放一次所持續(xù)時(shí)間*/ -webkit-animation-timing-function: ease;/*動(dòng)畫播放頻率*/ -webkit-animation-iteration-count: infinite;/*動(dòng)畫播放次涒為無限次*/ } /*click button效果*/ .click-btn { background: rgba(125,220,80,0.8); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 0 0 8px rgba(255,255,255,0.8),0 0 10px rgba(10,255,120,0.3); -moz-box-shadow: inset 0 0 8px rgba(255,255,255,0.8),0 0 10px rgba(10,255,120,0.3); box-shadow: inset 0 0 8px rgba(255,255,255,0.8),0 0 10px rgba(10,255,120,0.3); padding: 5px 10px; color: #369; font-size: 16px; font-weight: bold; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); cursor: pointer; }
jQuery Code:
<script type="text/javascript"> $(document).ready(function(){ $(".click-btn").click(function(){ $(this).siblings().addClass("round"); }); }); </script>
我們載入時(shí)box是沒有任何動(dòng)畫效果的，當(dāng)我們點(diǎn)擊了click button看給原box上加上一個(gè)round的class名，從而觸發(fā)了一個(gè)round的動(dòng)作。請(qǐng)看效果：
未點(diǎn)擊按鈕時(shí)效果（未觸發(fā)動(dòng)畫效果）
我們這里簡(jiǎn)單的介紹了兩個(gè)demo的應(yīng)用，其實(shí)大家可以發(fā)揮自己的想像制作出更好更多的動(dòng)畫效果，如果你對(duì)animation制作動(dòng)畫很感興趣，你可以參考這幾個(gè)網(wǎng)站：webdesignersblog、slodive、impressivewebs這上面有許多特別有意的動(dòng)畫demo。
聯(lián)系客服
