CSS3中animation屬性的使用詳解

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

Keyframes具有自己的語法規則，他的命名是由」@key

<br/>

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

<br/>

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動畫屬性。

我們來看一個實例:

@-webkit-keyframes 'test' {   
     0% {   
        margin-left: 100px;   
        background: green;   
     }   
     40% {   
        margin-left: 150px;   
        background: orange;   
     }   
     60% {   
        margin-left: 75px;   
        background: blue;   
     }   
     100% {   
        margin-left: 100px;   
        background: red;   
     }   
  }

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

201586182405067.png (499×536)

<br/>

Keyframes定義好了，我們以後需要怎麼去定義了呼叫剛才定義好的動畫「test」

<br/>

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

<br/>

下面我們來看看怎麼給一個元素呼叫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一样，最后出现的权根是最大的。当动画结束后，样式回到默认效果。

 以上就是CSS3中animation属性的使用详解的内容，更多相关内容请关注PHP中文网（www.php.cn）！