摘要：中制作動(dòng)畫(huà)的幾個(gè)屬性中的變形過(guò)渡動(dòng)畫(huà)。默認(rèn)值為，為時(shí)，表示變化是瞬時(shí)的，看不到過(guò)渡效果。實(shí)現(xiàn)動(dòng)畫(huà)效果主要由兩部分組成通過(guò)類似動(dòng)畫(huà)中的幀來(lái)聲明一個(gè)動(dòng)畫(huà)在屬性中調(diào)用關(guān)鍵幀聲明的動(dòng)畫(huà)。

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

語(yǔ)法：

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

rotate() :通過(guò)指定的角度參數(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)。（關(guān)于變形基點(diǎn)已在前幾篇中講解過(guò)，https://segmentfault.com/a/11...）

transform(100px,20px);

transform:translateX(100px):

transform:translateY(20px)

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

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

transform:skew(30deg,10deg);

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

屬性詳解

transition-property

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

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

transiton-timing-function

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

liner ：勻速

ease-in：加速

ease-out：減速

ease-in-out：先加速再減速

cubic-bezier：三次貝塞爾曲線，可以定制

觸發(fā)過(guò)渡

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

局限性

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

（1）transition需要事件觸發(fā)，所以沒(méi)法在網(wǎng)頁(yè)加載時(shí)自動(dòng)發(fā)生。

（2）transition是一次性的，不能重復(fù)發(fā)生，除非一再觸發(fā)。

（3）transition只能定義開(kāi)始狀態(tài)和結(jié)束狀態(tài)，不能定義中間狀態(tài)，也就是說(shuō)只有兩個(gè)狀態(tài)。

（4）一條transition規(guī)則，只能定義一個(gè)屬性的變化，不能涉及多個(gè)屬性。

CSS Animation就是為了解決這些問(wèn)題而提出的。

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

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

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

animation動(dòng)畫(huà)屬性

還是先列表格來(lái)說(shuō)明屬性，自己感覺(jué)會(huì)比較清晰：

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

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

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

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

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)畫(huà)有效果，就必須要通過(guò)CSS3animation屬性來(lái)調(diào)用它。

區(qū)別

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