CSS3新動畫效果

CSS3添加了幾個動畫效果的屬性，經過設置這些屬性，能夠作出一些簡單的動畫效果而不須要再去借助JavaScript。CSS3動畫的屬性主要分爲三類：transform、transition以及animation。

transform
rotate
設置元素順時針旋轉的角度，用法是：
transform: rotate(x);
參數x必須是以deg結尾的角度數或0，可爲負數表示反向。
scale
設置元素放大或縮小的倍數，用法包括：
transform: scale(a); 元素x和y方向均縮放a倍
transform: scale(a, b); 元素x方向縮放a倍，y方向縮放b倍
transform: scaleX(a); 元素x方向縮放a倍，y方向不變
transform: scaleY(b); 元素y方向縮放b倍，x方向不變
translate
設置元素的位移，用法爲：
transform: translate(a, b); 元素x方向位移a，y方向位移b
transform: translateX(a); 元素x方向位移a，y方向不變
transform: translateY(b); 元素y方向位移b，x方向不變
skew
設置元素傾斜的角度，用法包括：
transform: skew(a, b); 元素x方向逆時針傾斜角度a，y方向順時針傾斜角度b
transform: skewX(a); 元素x方向逆時針傾斜角度a，y方向不變
transform: skewY(b); 元素y方向順時針傾斜角度b，想方向不變
以上的參數均必須是以deg結尾的角度數或0，可爲負數表示反向。
matrix
設置元素的變形矩陣，由於矩陣變形過於複雜，暫略。
origin
設置元素的懸掛點，用法包括：
transform-origin: a b; 元素的懸掛點爲(a, b)
元素的懸掛點即爲它旋轉和傾斜時的中心點。取值中的a、b能夠是長度值、以%結尾的百分比或者left、top、right、bottom四個值。

transition
transition-property
指定transition效果做用的CSS屬性，其值是CSS屬性名。
transition-duration
動畫效果持續的時間，其值爲以s結尾的秒數。
transition-timing-function
指定元素狀態的變化速率函數，其取值基於貝賽爾曲線函數，詳情以下所示：

transition-delay
動畫效果推遲開始執行的時間，其值爲以s結尾的秒數。
CSS3動畫的生命週期以下圖所示，從中能夠清楚的看出duration和delay之間的關係：

animation
CSS3中真正的動畫屬性是animation，而前面的transform和transition都只是對DOM元素的變形或者是狀態的過渡。實際上，CSS3所支持的動畫效果只是填充動畫，也就是說先設定整個動畫生命週期中的幾個關鍵狀態（key frame，關鍵幀），而後動畫將自行計算並模擬關鍵幀之間的過渡。那麼在設置animation的屬性以前就必須先設定好關鍵幀了。
關鍵幀@keyframes的語法結構以下：

@keyframesNAME {
a% {
/*CSS屬性*/
}
b% {
/*CSS屬性*/
}
...
}
NAME表示動畫的名字；a%、b%表示以百分號結尾的百分數，用於設定該關鍵幀在動畫生命週期中的位置；百分數後面的{ } 中則須要寫成該關鍵幀狀態下CSS屬性的值。另外，若是同一個百分數值在@keyframes中出現屢次，那麼後出現的將覆蓋先出現的；而且關鍵幀在@keyframes中時無序的。
設置完關鍵幀後就能夠繼續設定animation了。

animation-name
指定選用的動畫的名字，即keyframes中的NAME。
animation-duration
同transition-duration。
animation-timing-function
同transition-timing-function。
animation-delay
同transition-delay。
animation-iteration-count
設定動畫執行的次數，其值能夠是數字也能夠是infinite（循環執行）。
animation-direction
設定動畫執行的方向，其值能夠是normal（正常順序播放）或alternate（反向播放）。