CSS3學習之Animation詳解

CSS3 Animation

CSS3屬性中有關於製作動畫的三個屬性：Transform,Transition,Animation；我們一起學習完了Transform和Transition，讓我們對元素實現了一些基本的動畫效果，這些我想足以讓大家激動了一陣子，今天我們趁著這個熱勁繼續第三個動畫屬性Animation的學習，單從Animation字面上的意思，我們就知道是“動畫”的意思。但CSS3中的Animation與HTML5中的Canvas繪製動畫又不同，Animation只應用在頁面上已存在的DOM元素上，而且他跟Flash和JavaScript以及jQuery製作出來的動畫效果又不一樣，因為我們使用CSS3的Animation製作動畫我們可以省去複雜的js,jquery代碼（像我這種不懂js的人來說是件很高興的事了），只是有一點不足之處，我們運用Animation能建立自己想要的一些動畫效果，但是有點粗糙，如果想要製作比較好的動畫，我見意大家還是使用flash或js等。雖然說Animation製作出來的動畫簡單粗糙，但我想還是不能減少我們大家對其學習的熱情。

在開始介紹Animation之前我們有必要先來瞭解一個特殊的東西，那就是"Keyframes",我們把他叫做“主要畫面格”，玩過flash的朋友可能對這個東西並不會陌生。下面我們就一起來看看這個“Keyframes”是什麼東西。前面我們在使用transition製作一個簡單的transition效果時，我們包括了初始屬性和最終屬性，一個開始執行動作時間和一個延續動作時間以及動作的變換速率，其實這些值都是一個中間值，如果我們要控制的更細一些，比如說我要第一個時間段執行什麼動作，第二個時間段執行什麼動作（換到flash中說，就是第一幀我要執行什麼動作，第二幀我要執行什麼動作），這樣我們用Transition就很難實現了，此時我們也需要這樣的一個“主要畫面格”來控制。那麼CSS3的Animation就是由“keyframes”這個屬性來實現這樣的效果。下面我們一起先來看看Keyframes:

Keyframes具有其自己的文法規則，他的命名是由"@keyframes"開頭，後面緊接著是這個“動畫的名稱”加上一對花括弧“{}”，括弧中就是一些不同時間段樣式規則，有點像我們css的樣式寫法一樣。對於一個"@keyframes"中的樣式規則是由多個百分比構成的，如“0%”到"100%"之間，我們可以在這個規則中建立多個百分比，我們分別給每一個百分比中給需要有動畫效果的元素加上不同的屬性，從而讓元素達到一種在不斷變化的效果，比如說移動，改變元素顏色，位置，大小，形狀等，不過有一點需要注意的是，我們可以使用“fromt”“to”來代表一個動畫是從哪開始，到哪結束，也就是說這個 "from"就相當於"0%"而"to"相當於"100%",值得一說的是，其中"0%"不能像別的屬性取值一樣把百分比符號省略，我們在這裡必須加上百分符號（“%”）如果沒有加上的話，我們這個keyframes是無效的，不起任何作用。因為keyframes的單位只接受百分比值。

Keyframes可以指定任何順序排列來決定Animation動畫變化的關鍵位置。其具體文法規則如下：

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是一個動畫名稱，你可以隨便取，當然語義化一點更好，Percentage是百分比值，我們可以添加許多個這樣的百分比，Properties為css的屬性名稱，比如說left,background等，value就是相對應的屬性的屬性值。值得一提的是，我們from和to 分別對應的是0%和100%。這個我們在前面也提到過了。到目前為止支技animation動畫的只有webkit核心的瀏覽器，所以我需要在上面的基礎上加上-webkit首碼，據說Firefox5可以支援css3的 animation動畫屬性。

我們來看一個W3C官網的執行個體

@-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;     }  }

這裡我們定義了一個叫“wobble”的動畫，他的動畫是從0%開始到100%時結束，從中還經曆了一個40%和60%兩個過程，上面代碼具體意思是：wobble動畫在0%時元素定位到left為100px的位置背景色為green，然後40%時元素過渡到left為150px的位置並且背景色為orange，60%時元素過渡到left為75px的位置,背景色為blue，最後100%結束動畫的位置元素又回到起點left為100px處,背景色變成red。假設定我們只給這個動畫有10s的執行時間，那麼他每一段執行的狀態如所示：

Keyframes定義好了以後，我們需要怎麼去調用剛才定義好的動畫“wobble”

CSS3的animation類似於transition屬性，他們都是隨著時間改變元素的屬性值。他們主要區別是transition需要觸發一個事件(hover事件或click事件等)才會隨時間改變其css屬性；而animation在不需要觸發任何事件的情況下也可以顯式的隨著時間變化來改變元素css的屬性值，從而達到一種動畫的效果。這樣我們就可以直接在一個元素中調用animation的動畫屬性,基於這一點，css3的animation就需要明確的動畫屬性值，這也就是回到我們上面所說的，我們需要keyframes來定義不同時間的css屬性值,達到元素在不同時間段變化的效果。

下面我們來看看怎麼給一個元素調用animation屬性

 .demo1 {     width: 50px;     height: 50px;     margin-left: 100px;     background: blue;     -webkit-animation-name:'wobble';/*動畫屬性名稱，也就是我們前面keyframes定義的動畫名*/     -webkit-animation-duration: 10s;/*動畫期間*/     -webkit-animation-timing-function: ease-in-out; /*動畫頻率，和transition-timing-function是一樣的*/     -webkit-animation-delay: 2s;/*動畫延遲時間*/     -webkit-animation-iteration-count: 10;/*定義迴圈資料，infinite為無限次*/     -webkit-animation-direction: alternate;/*定義動畫方式*/  }

CSS Animation動畫效果將會影響元素相對應的css值，在整個動畫過程中，元素的變化屬性值完全是由animation來控制，動畫後面的會覆蓋前面的屬性值。如上面例子：因為我們這個demo只是在不同的時間段改變了demo1的背景色和左邊距，其預設值是：margin-left:100px;background: blue；但當我們在執行動畫0%時，margin-left:100px,background:green；當執行到40%時，屬性變成了：margin-left:150px;background:orange;當執行到60%時margin-left:75px;background:blue;當動畫 執行到100%時：margin-left:100px;background: red;此時動畫將完成，那麼margin-left和background兩個屬性值將是以100%時的為主,他不會產生疊加效果，只是一次一次覆蓋前一次出將的css屬性。就如我們平時的css一樣，最後出現的權根是最大的。當動畫結束後，樣式回到預設效果。

我們可以看一張來自w3c官網有關於css3的animation對屬性變化的過程

從上面的Demo中我們可以看出animation和transition一樣有自己相對應的屬性，那麼在animation主要有以下幾種：animation-name;animation-duration;animation-timing-function;animation-delay;animation-iteration-count;animation-direction;animation-play-state。下面我們分別來看看這幾個屬性的使用

一、animation-name:

文法：

 animation-name: none | IDENT[,none | IDENT]*;

取值說明：

animation-name:是用來定義一個動畫的名稱，其主要有兩個值：IDENT是由Keyframes建立的動畫名，換句話說此處的IDENT要和Keyframes中的IDENT一致，如果不一致,將不能實現任何動畫效果；none為預設值，當值為none時，將沒有任何動畫效果。另外我們這個屬性跟前面所講的transition一樣，我們可以同時附幾個animation給一個元素，我們只需要用逗號“，”隔開。

二、animation-duration：

文法：

 animation-duration: <time>[,<time>]*

取值說明：

animation-duration是用來指定元素播放動畫所持續的時間長，取值:<time>為數值，單位為s （秒.）其預設值為“0”。這個屬性跟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:是指元素根據時間的推進來改變屬性值的變換速率，說得簡單點就是動畫的播放方式。他和transition中的transition-timing-function一樣，具有以下六種變換方式：ease;ease-in;ease-in-out;linear;cubic-bezier。具體的使用方法大家可以點這裡，查看其中transition-timing-function的使用方法。

四、animation-delay:

文法：

 animation-delay: <time>[,<time>]*

取值說明：

animation-delay:是用來指定元素動畫開始時間。取值為<time>為數值，單位為s(秒)，其預設值也是0。這個屬性和transition-delayy使用方法是一樣的。

五、animation-iteration-count

文法：

 animation-iteration-count:infinite | <number> [, infinite | <number>]*

取值說明：

animation-iteration-count是用來指定元素播放動畫的迴圈次數，其可以取值<number>為數字，其預設值為“1”；infinite為無限次數迴圈。

六、animation-direction

文法：

 animation-direction: normal | alternate [, normal | alternate]*

取值說明：

animation-direction是用來指定元素動畫播放的方向，其只有兩個值，預設值為normal，如果設定為normal時，動畫的每次迴圈都是向前播放；另一個值是alternate，他的作用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。

七、animation-play-state

文法：

  animation-play-state:running | paused [, running | paused]*

取值說明：

animation-play-state主要是用來控制元素動畫的播放狀態。其主要有兩個值，running和paused其中running為預設值。他們的作用就類似於我們的音樂播放器一樣，可以通過paused將現正播放的動畫停下了，也可以通過running將暫停動畫重新播放，我們這裡的重新播放不一定是從元素動畫的開始播放，而是從你暫停那個位置開始播放。另外如果暫時了動畫的播放，元素的樣式將回到最原始設定狀態。這個屬性目前很少核心支援，所以只是稍微提一下。

上面我們分別介紹了animation中的各個屬性的文法和取值，那麼我們綜合上面的內容可以給animation屬性一個速記法：

 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>] ]*

如所示

相容的瀏覽器

前面我也簡單的提過，CSS3的animation到目前為止只支援webkit核心的瀏覽器，因為最早提出這個屬性的就是safari公司,據說Firefox5.0+將支援Animation。

那麼到此為止，我們主要一起學習了有關animation的理論知識，下面我們一起來看兩個執行個體製作過程，來加強對animation的實踐能力

DEMO一：發光變色的button

我們這個demo主要是通過在keyframes中改變元素的background;color;box-shadow三個屬性，來達到一種發光變色的button效果，我們來看看其實現代碼

HTML Code:

 <a href="" class="btn">發光的button</a>

CSS Code

/*給這個按鈕建立一個動名名稱：buttonLight，然後在每個時間段設定不同的background,color來達到變色效果，改變box-shadow來達到光暈效果*/

 @-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);    /*調用animation屬性，從而讓按鈕在載入頁面時就具有動畫效果*/    -webkit-animation-name: "buttonLight"; /*動畫名稱，需要跟@keyframes定義的名稱一致*/    -webkit-animation-duration: 5s;/*動畫持續的時間長*/    -webkit-animation-iteration-count: infinite;/*動畫迴圈播放的次數*/  }

效果：

效果一

變化中效果二

為了更好的看出這個demo的效果，你可以把上面的代碼複製到你本過的頁面上，並使用safari和chrome，你會覺得很有意思，整個按鈕好像在不停的呼吸一樣。

Demo二：方形旋轉變成圓型

我們這個demo是通過transform的rotate和border-radius不同值，把一個方型圖片隨著時間的推移，慢慢的轉換成了個圓型效果，下面我們來看看其具體實現的效果

HTML Code:

  <a href="#" class="box"></a>   <span class="click-btn">Click</span>

CSS Code:

/*定義方型轉化為圓型的動畫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一個初步樣式*/   a.box {      display: block;      width: 50px;      height: 50px;      background: red;      margin-bottom: 20px;   }   /*圓型box的樣式，並在這裡應用animation*/   a.round {      -webkit-border-radius: 25px;      -moz-border-radius: 25px;      border-radius: 25px;      background: green;      -webkit-animation-name: 'round'; /*動畫名稱*/      -webkit-animation-duration: 60s;/*播放一次所期間*/      -webkit-animation-timing-function: ease;/*動畫播放頻率*/      -webkit-animation-iteration-count: infinite;/*動畫播放次涒為無限次*/    }              /*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>

我們載入時box是沒有任何動畫效果的，當我們點擊了click button看給原box上加上一個round的class名，從而觸發了一個round的動作。請看效果：

未點擊按鈕時效果（未觸發動畫效果）

點擊click按鈕開始播放動畫

【相關推薦】

1. CSS3免費視頻教程

2. CSS3教學之動畫製作學習

3. 詳細分析關於CSS3中新增的特性

4. 詳解關於css3的新特性

5. 推薦十個CSS3動畫執行個體