除了在之前的文章中介紹過的 CSS3 的變形 (transformation) 和轉換 (transition) 外，CSS3 還有一種自由度更大的自定義動畫，開發者甚至可以使用變形（transformation）和轉換（transition）製作自定義動畫，利用純 CSS 製作出像 Flash 一樣的效果。在實際使用中不難發現，變形和轉換更適合做元素的互動，而自定義動畫除了做互動外還能使到網頁具有活力，有了自定義動畫，利用 CSS 代替 Flash 才會更加現實。

首先看看 animation 的效果 —— Demo 。

一. animation 基礎

animation 的引數與 transition 比較相似，如果之前瞭解過 transition 的童鞋應該會對 animation 的引數感覺很熟悉。具體的引數如下：

animation-name

動畫名稱，預設為 none

animation-duration

動畫的持續時間，預設為 0

animation-timing-function

動畫的過渡型別，引數可選值類似於 transition-timing-function ，預設為 ease ，具體如下：

• linear：線性過渡。相當於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
• ease：平滑過渡。相當於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)
• ease-in：由慢到快。相當於貝塞爾曲線(0.42, 0, 1.0, 1.0)
• ease-out：由快到慢。相當於貝塞爾曲線(0, 0, 0.58, 1.0)
• ease-in-out：由慢到快再到慢。相當於貝塞爾曲線(0.42, 0, 0.58, 1.0)
• cubic-bezier(number, number, number, number)：特定的貝塞爾曲線型別，number 在 [0, 1] 區間內取值

animation-delay

動畫延遲的時間

animation-iteration-count

動畫的迴圈次數，其值可以是一個正整數，表示迴圈次數，也可以設定為 infinite ，即無限迴圈，預設為 1

animation-direction

動畫在迴圈中是否反向運動，normal 為正向方向，alternate 為向常與反向交替運動，具體為第偶數次正向運動，第奇數次向反方向運動，預設為 normal

animation-play-state

表示動畫的狀態，預設值為 running ，表示正在運動，paused 為暫停。但 w3c 正在考慮是否將該屬性移除，並通過重設樣式或其他方式表示動畫的狀態，因此不建議使用該屬性。

以上這些引數都可以同時賦予多個值，只要注意各引數順序對應即可，例如要為 #demo 指定兩個動畫，可以這樣編寫（大多數瀏覽器仍需通過私有屬性才能支援 animation ，為了方便閱讀，這裡省略瀏覽器私有屬性，按 W3C 標準寫法編寫。）

這樣 #demo 就會同時獲得兩個動畫，但是，動畫的具體過程還沒有指定，實際上動畫的具體內容並不在 animation 內指定，而是利用另一個屬性 @keyframes 指定，@keyframes 指定了一個動畫的名稱和實際內容，而 animation 則負責為元素指定引用的動畫，並對動畫的時間、過渡型別等作出設定。這樣把動畫的引用和動畫的實際內容分開設定，可以提高動畫的獨立性和利用率。

@keyframes 支援兩種設定方式，分別用於簡單動畫和複雜的動畫

例如，為 #demo 設定一個簡單的線性動畫，使到其 opacity 值由 0 線性過渡到 1，可以直接使用 from 和 to 指定初始和結束狀態，

若對於複雜的動畫，則需要使用 percentage ，percentage 即百分比，animation 支援使用“%”指定到某一個百分比時動畫所執行到的效果，例如指定元素向右平移再向下平移，可以這樣編寫：

也可以配合 from 和 to 使用：