CSS 3動畫
CSS 3在原來的基礎上新增了變形和動畫相關的屬性，通過這些屬性可以實現以前需要大段JavaScript才能實現的功能。css 3的變形功能可以對HTML元素執行位移、旋轉、縮放、傾斜4種幾何變換，藉助於這幾種幾何變換，css 3提供了Transition動畫。Transition動畫可以控制HTML元素的某個屬性發生改變時會經歷一段時間、以平滑漸變的方式發生改變，這就產生了動畫效果。
Transition動畫通過transition屬性來指定。transition屬性的值包括如下4個部分：
- transition-property：指定對HTML元素的哪個屬性進行平滑漸變處理。該屬性可以指定background-color、width、height等各種標準的css屬性。
- transition-duration：指定屬性平滑漸變的持續時間。
- transition-timing-function：指定漸變的速度，支援如下幾個屬性值：
- ease：動畫開始時較慢，然後速度加快，到達最大速度後再減慢速度（相當於cubic-bezier(0.25,0.1,0.25,1.0)）
- linear：線性速度。動畫開始時的速度到結束時的速度保持不變（相當於cubic-bezier(0.0,0.0,1.0,1.0)）
- ease-in：動畫開始時速度較慢，然後速度加快（相當於cubic-bezier(0.42,0,1.0,1.0)）
- ease-out：動畫開始時速度很快，然後速度減慢。（相當於cubic-bezier(0,0,0.58,1.0)）
- ease-in-out：動畫開始時速度較慢，然後速度加快，到達最大速度後再減慢速度。（相當於cubic-bezier(0.42,0,0.58,1.0)）
- cubic-bezier(x1,y1,x2,y2)：通過貝塞爾曲線來控制動畫的速度。
- transition-delay：指定延遲時間，也就是指定經過多長時間的延遲才會開始執行平滑漸變。
通過多個屬性同時漸變可以非常方便地開發出動畫效果。假如希望實現一個在頁面上隨滑鼠漂移的氣球——控制氣球移動主要主要是修改氣球圖片的left、top兩個屬性值，讓這兩個屬性值等於滑鼠按下的X、Y座標即可。再通過設定氣球圖片的left、top屬性以平滑漸變的方式來進行，就可以看到氣球隨滑鼠移動的動畫效果了。頁面程式碼如下：
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 漂浮的氣球 </title> <style type="text/css"> img#target { position: absolute; /* 指定氣球圖片的left、top屬性會採用平滑漸變的方式來改變 */ transition: left 5s linear , top 5s linear; } </style> </head> <body> <img id="target" src="balloon.gif" alt="氣球"/> <script type="text/javascript"> var target = document.getElementById("target"); target.style.left = "0px"; target.style.top = "0px"; // 為滑鼠按下事件繫結監聽器 document.onmousedown = function(evt) { // 將滑鼠事件的X、Y座標賦給氣球圖片的left、top。 target.style.left = evt.pageX + "px"; target.style.top = evt.pageY + "px"; } </script> </body>
上面標記出來的程式碼指定了氣球圖片的left、top兩個css屬性會以平滑漸變的方式發生改變，這樣每次按下滑鼠時，我們可以看到這個氣球慢慢地漂浮過來的效果。
Transition動畫比較簡單，只要指定HTML元素的哪些CSS屬性需要使用動畫效果來執行變化，並指定動畫的持續時間，就可以保證HTML元素按指定規則播放動畫。比Transition動畫功能更加強大的是Animation動畫，它與transition動畫一樣，可以與位移、旋轉、縮放、傾斜4種幾何變換結合，但Animation動畫可以指定多個關鍵幀，從而允許定義功能更豐富的自定義動畫。
CSS3為Animation動畫提供瞭如下幾個屬性
- animation-name：指定動畫的名稱。該屬性指定一個已有的關鍵幀定義。
- animation-duration：指定動畫的持續時間
- animation-timing-function：指定動畫的變換速度
- animation-delay：指定動畫延遲多長時間才開始執行
- animation-iteration-count：指定動畫的迴圈執行次數。
- animation：以上屬性的集合，是一個複合屬性。其屬性的格式排列順序與以上幾個屬性的順序一致。
上述關鍵幀的定義格式如下：
@keyframes 關鍵幀名稱{
from|to|百分比{
屬性1:屬性值1;
屬性2:屬性值2;
屬性3:屬性值3;
...
}
...
}
以上格式中，from|to|百分比用於定義關鍵幀的位置，from代表開始處；to代表動畫結束幀；百分比指定關鍵幀的出現位置，例如，20%代表關鍵幀出現在動畫進行了1/5時間處。一個關鍵幀定義可以包含多個關鍵幀。通過指定關鍵幀，我們可以實現圖片的無縫滾動。
純CSS動畫實現圖片的無縫滾動效果實現思路如下（HTML元素選擇為我個人習慣）：設定一個div用於顯示圖片，併為該div設定寬、高以及overflow:hidden;屬性，讓超出容器部分無法顯示；另外設定一個ol或ul，其寬度設定百分比（數值大小為圖片張數*100），圖片按順序依次存放在li元素中，並根據滾動方向設定li元素排列方式（豎直向下排列或水平排列）；為ol或ul元素設定animation動畫屬性，併為關鍵幀定義指定關鍵幀，需要注意瀏覽器的相容問題。