[size=large][b]1.參考鏈結[/b][/size]
[url]
[size=large][b]2.動畫內容[/b][/size]
css3動畫的屬性主要分為三類：transform、transition以及animation。因為css3還沒有正式發布，所以各種瀏覽器對它的支援也不盡相同。所以在設定css3屬性（包括@開頭的新屬性）的時候通常需要對其新增瀏覽器標識的字首，如-webkit- 表示webkit核心的瀏覽器chrome和safari，-moz- 表示fire fox，-o- 表示opera。無視ie吧，在ie上的實現通常還是要用到濾鏡，而不是css3。
[b]1、transform
[/b]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四個值。
[b]2、transition
[/b]
transition-property
指定transition效果作用的css屬性，其值是css屬性名。
transition-duration
動畫效果持續的時間，其值為以s結尾的秒數。
transition-timing-function
指定元素狀態的變化速率函式，其取值基於貝賽爾曲線函式，詳情如下所示：
[img]
transition-delay
動畫效果推遲開始執行的時間，其值為以s結尾的秒數。
css3動畫的生命週期如下圖所示，從中可以清楚的看出duration和delay之間的關係：
[img]
[b]3、transform
[/b]css3中真正的動畫屬性是animation，而前面的transform和transition都只是對dom元素的變形或者是狀態的過渡。實際上，css3所支援的動畫效果只是填充動畫，也就是說先設定整個動畫生命週期中的幾個關鍵狀態（key frame，關鍵幀），然後動畫將自行計算並模擬關鍵幀之間的過渡。那麼在設定animation的屬性之前就必須先設定好關鍵幀了。
關鍵幀@keyframes的語法結構如下：
@keyframesname
b% ...
}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
css動畫 幀動畫
動畫 animation 設定關鍵幀 從左上，到右上，到右下的動畫 上面是系統性動畫屬性，下面拆分 animation 綜合性的動畫設定屬性 animation name 動畫名稱 animation duration 動畫的時間週期 animation timing function 動畫變化的速...
CSS3學習筆記 動畫
css3中的動畫功能分為transitions功能和animations功能 支援從乙個屬性在指定時間內平滑過渡到另乙個屬性值 transitions功能具有的屬性 1 transition property 哪種屬性平滑過渡 2 tranition duration 在多久時間內完成屬性的平滑過渡...
CSS3動畫 學習打卡
animation name屬性 1 檢索或者設定物件所應用的動畫的名稱 2 語法 keyframename none 3 引數說明 1 keyframename 指定要繫結到選擇器的關鍵幀的名稱 2 none 指定有沒有動畫 可用於覆蓋從級聯的動畫 animation duration屬性 小結 ...