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
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
字首因為css3還沒有正式發布，所以各種瀏覽器對它的支援也不盡相同。所以在設定css3屬性（包括@開頭的新屬性）的時候通常需要對其新增瀏覽器標識的字首，如-webkit- 表示webkit核心的瀏覽器chrome和safari，-moz- 表示fire fox，-o- 表示opera。無視ie吧，在ie上的實現通常還是要用到濾鏡，而不是css3。
例項下面的**模擬了上述大部分的css3動畫屬性，由於只使用了–webkit- 字首，所以只能在chrome或safari下正常執行。
html**：
html**
rotate
scale
translate
skew
origin
single property
whole property
change & resume
animation
css**：
animation.css
css**
div
.rotate
.rotate:hover
.scale
.scale:hover
.translate
.translate:hover
.skew
.skew:hover
.origin
.origin:hover
.single
.single:hover
.whole
.whole:hover
.resume
.resume:hover
.animation:hover
@-webkit-keyframes anim
50%
100%
}
Css3 動畫效果
相關作品 最近看了比較多的動畫效果，想做些自己感興趣的作品，遇到以下問題，記錄下來 1.簡單的動畫主要用transition和transform 2.滑鼠放上去產生的效果，before和after顯示寫法如下 item style3 hover before 3.關於3d動畫效果，要顯示出來，需要新...
css3動畫效果
css3中的transform中有旋轉，放縮，傾斜，平移的功能，分別對應的屬性是 rotate，scale，skew，translate 旋 rotate css view plaincopy webkit transform rotate 10deg moz transform rotate 10...
css3動畫效果
css3中的transform中有旋轉，放縮，傾斜，平移的功能，分別對應的屬性是 rotate，scale，skew，translate 旋 rotate css view plaincopy webkit transform rotate 10deg moz transform rotate 10...