CSS3 的動畫(animation)相關屬性

CSS3 與 CSS2最大的不同點，我想就是加入了動畫的效果，讓以往必須透過 javascript 才能完成的特效得以用比較簡單的方式完成，這對許多不太懂 javascript 的設計師來說，可說是一大福音。

主要與動畫animation相關的屬性如下：

1. animation
   可以直接把所有下面的動畫屬性都直接定義在這，可節省程式碼。
   語法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;
    
2. animation-name
   指定相對應的@keyframes，如 animation-name:myframe1;
   語法：animation-name: keyframename | none | initial | inherit;
    
3. animation-duration
   設定動畫播放時間，如 animation-duration:2s;
   語法：animation-duration: time | initial | inherit;
    
4. animation-timing-function
   設定特效函數，如 animation-timing-function: ease;
   語法：animation-timing-function: linear | ease | ease-in | ease-out | cubic-bezier(n,n,n,n) | initial | inherit;
    
5. animation-delay
   設定動畫延遲播放時間，如 animation-delay:2s; //等待2秒後再播放
   語法：animation-delay: time | initial | inherit;
    
6. animation-iteration-count
   設定動畫播放次數，如 animation-iteration-count:3; //播放3次
   語法：animation-iteration-count: number | infinite | initial | inherit;
    
7. animation-direction
   設定動畫播放方向(時間軸)，如 animation-direction:alternate; //播放奇數次時正常播放，偶數時倒帶
   語法：animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;
    
8. animation-fill-mode
   設定動畫播放完畢後的狀態，如 animation-fill-mode:forwards; //播放後留在動畫起點
   語法：animation-fill-mode: none | forwards | backwards | both | initial | inherit;
    
9. animation-play-state
   設定動畫播放狀態，如 animation-play-state:paused; //動畫暫停
   語法：animation-play-state: paused | running | initial | inherit;
    

注意事項：

1. 如果您的客戶是IE的愛用者，IE10以上才支援CSS3 的animation！要享受這樣的特效，就乖乖升級作業系統或者換瀏覽器吧。
2. 若要讓Opera 或 Chrome支援animation的話，必須要在animation加上前綴-webkit-，如 -webkit-animation-delay:3s;

範例：