css3中制作動(dòng)畫的幾個(gè)屬性：css3中的變形（transform）、過渡（transition）、動(dòng)畫（animation）。

一、 CSS3變形（transform）

語法：

transform ： none | <transform-function> [ <transform-function> ]* 
也就是：
transform: rotate | scale | skew | translate |matrix;

1.1、旋轉(zhuǎn)rotate（）

rotate(<angle>) :通過指定的角度參數(shù)對(duì)元素指定一個(gè)2D rotation(2D旋轉(zhuǎn))，需先有transform-origin屬性的定義（默認(rèn)旋轉(zhuǎn)中點(diǎn)是中心點(diǎn)）。

transform-origin定義的是旋轉(zhuǎn)的基點(diǎn)，其中angle是指選擇角度，正順時(shí)針旋轉(zhuǎn)，負(fù)逆時(shí)針旋轉(zhuǎn)。

1.2、移動(dòng)translate（X,Y）

transform(100px,20px);

transform:translateX(100px):

transform:translateY(20px)

1.3、縮放scale（X,Y）

scale(<number>[, <number>])：提供執(zhí)行[sx,sy]縮放矢量的兩個(gè)參數(shù)指定一個(gè)2D scale（2D縮放）。如果第二個(gè)參數(shù)未提供，則取與第一個(gè)參數(shù)一樣的值。而Y是一個(gè)可選參數(shù)，如果沒有設(shè)置Y值，則表示X，Y兩個(gè)方向的縮放倍數(shù)是一樣的,并以X為準(zhǔn)。如：transform:scale(2,1.5);

1.4、斜切skew()

skew(<angle> [, <angle>]) ：X軸Y軸上的skew transformation（斜切變換）。第一個(gè)參數(shù)對(duì)應(yīng)X軸，第二個(gè)參數(shù)對(duì)應(yīng)Y軸。如果第二個(gè)參數(shù)未提供，則值為0，也就是Y軸方向上無斜切。skew是用來對(duì)元素進(jìn)行扭曲變行，第一個(gè)參數(shù)是水平方向扭曲角度，第二個(gè)參數(shù)是垂直方向扭曲角度。其中第二個(gè)參數(shù)是可選參數(shù)，如果沒有設(shè)置第二個(gè)參數(shù)，那么Y軸為0deg。同樣是以元素中心為基點(diǎn)，我們也可以通過transform-origin來改變?cè)氐幕c(diǎn)位置。

transform:skew(30deg,10deg);

方法：X軸：正數(shù)為左，負(fù)數(shù)為右； Y軸：正數(shù)為下，負(fù)數(shù)為上

二、CSS3過渡（transition）

屬性詳解

transition-property

不是所有屬性都能過渡，只有屬性具有一個(gè)中間點(diǎn)值才具備過渡效果。
transition-duration

指定從一個(gè)屬性到另一個(gè)屬性過渡所要花費(fèi)的時(shí)間。默認(rèn)值為0，為0時(shí)，表示變化是瞬時(shí)的，看不到過渡效果。

transiton-timing-function

過渡函數(shù)，有如下幾種：

• liner ：勻速
• ease-in：加速
• ease-out：減速
• ease-in-out：先加速再減速
• cubic-bezier：三次貝塞爾曲線，可以定制

觸發(fā)過渡

單純的代碼不會(huì)觸發(fā)任何過渡操作，需要通過用戶的行為（如點(diǎn)擊，懸浮等）觸發(fā)，可觸發(fā)的方式有：
:hoever :focus :checked 媒體查詢觸發(fā) JavaScript觸發(fā)

局限性

transition的優(yōu)點(diǎn)在于簡單易用，但是它有幾個(gè)很大的局限。

• （1）transition需要事件觸發(fā)，所以沒法在網(wǎng)頁加載時(shí)自動(dòng)發(fā)生。
• （2）transition是一次性的，不能重復(fù)發(fā)生，除非一再觸發(fā)。
• （3）transition只能定義開始狀態(tài)和結(jié)束狀態(tài)，不能定義中間狀態(tài)，也就是說只有兩個(gè)狀態(tài)。
• （4）一條transition規(guī)則，只能定義一個(gè)屬性的變化，不能涉及多個(gè)屬性。

CSS Animation就是為了解決這些問題而提出的。

三、CSS3 animation(動(dòng)畫)

CSS3的animation屬性可以像Flash制作動(dòng)畫一樣，通過控制關(guān)鍵幀來控制動(dòng)畫的每一步，實(shí)現(xiàn)更為復(fù)雜的動(dòng)畫效果。ainimation實(shí)現(xiàn)動(dòng)畫效果主要由兩部分組成：

1）通過類似Flash動(dòng)畫中的幀來聲明一個(gè)動(dòng)畫；
2）在animation屬性中調(diào)用關(guān)鍵幀聲明的動(dòng)畫。**

注：animation屬性到目前位置得到了大多數(shù)瀏覽器的支持，但是，需要添加瀏覽器前綴哦！

animation動(dòng)畫屬性

還是先列表格來說明屬性，自己感覺會(huì)比較清晰：

（1）animation-name：none為默認(rèn)值，將沒有任何動(dòng)畫效果，其可以用來覆蓋任何動(dòng)畫
（2）animation-duration：默認(rèn)值為0，意味著動(dòng)畫周期為0，也就是沒有任何動(dòng)畫效果
（3）animation-timing-function：與transition-timing-function一樣
（4）animation-delay：在開始執(zhí)行動(dòng)畫時(shí)需要等待的時(shí)間
（5）animation-iteration-count：定義動(dòng)畫的播放次數(shù)，默認(rèn)為1，如果為infinite，則無限次循環(huán)播放
（6）animation-direction：默認(rèn)為nomal，每次循環(huán)都是向前播放，（0-100），另一個(gè)值為alternate，動(dòng)畫播放為偶數(shù)次則向前播放，如果為基數(shù)詞就反方向播放
（7）animation-state：默認(rèn)為running，播放，paused，暫停
（8）animation-fill-mode：定義動(dòng)畫開始之前和結(jié)束之后發(fā)生的操作，默認(rèn)值為none，動(dòng)畫結(jié)束時(shí)回到動(dòng)畫沒開始時(shí)的狀態(tài)；forwards，動(dòng)畫結(jié)束后繼續(xù)應(yīng)用最后關(guān)鍵幀的位置，即保存在結(jié)束狀態(tài)；backwards，讓動(dòng)畫回到第一幀的狀態(tài)；both：輪流應(yīng)用forwards和backwards規(guī)則。

@keyframes
CSS3的animation制作動(dòng)畫效果主要包括兩部分：1. 用關(guān)鍵幀聲明一個(gè)動(dòng)畫，2.在animation調(diào)用關(guān)鍵幀聲明的的動(dòng)畫。

@keyframes就是關(guān)鍵幀。這個(gè)幀與Flash里的幀類似，一個(gè)動(dòng)畫中可以有很多個(gè)幀。

一個(gè)@keyframes中的樣式規(guī)則是由多個(gè)百分比構(gòu)成的，可以在這個(gè)規(guī)則上創(chuàng)建多個(gè)百分比，從而達(dá)到一種不斷變化的效果。另外，@keyframes必須要加webkit前綴。舉個(gè)例子：

web前端開發(fā)學(xué)習(xí)Q-q-u-n： 731771211，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻，PDF）
div:hover {
  -webkit-animation: 1s changeColor;
  animation: 1s changeColor;  
}

@-webkit-keyframes changeColor {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}
@keyframes changeColor {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

上面代碼中的0% 100%的百分號(hào)都不能省略，0%可以由from代替，100%可以由to代替。要讓changeColor動(dòng)畫有效果，就必須要通過CSS3animation屬性來調(diào)用它。

區(qū)別

animation屬性類似于transition，他們都是隨著時(shí)間改變?cè)氐膶傩灾?，其主要區(qū)別在于：transition需要觸發(fā)一個(gè)事件才會(huì)隨著時(shí)間改變其CSS屬性；animation在不需要觸發(fā)任何事件的情況下，也可以顯式的隨時(shí)間變化來改變?cè)谻SS屬性，達(dá)到一種動(dòng)畫的效果