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

css3中制作動畫的幾個屬性：css3中的變形（transform）、過渡（transition）、動畫（animation）。

語法：

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

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

transform-origin定義的是旋轉(zhuǎn)的基點，其中angle是指選擇角度，正順時針旋轉(zhuǎn)，負逆時針旋轉(zhuǎn)。（關(guān)于變形基點已在前幾篇中講解過，https://segmentfault.com/a/11...）

transform(100px,20px);

transform:translateX(100px):

transform:translateY(20px)

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

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

transform:skew(30deg,10deg);

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

屬性詳解

transition-property

不是所有屬性都能過渡，只有屬性具有一個中間點值才具備過渡效果。
transition-duration

指定從一個屬性到另一個屬性過渡所要花費的時間。默認值為0，為0時，表示變化是瞬時的，看不到過渡效果。

transiton-timing-function

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

liner ：勻速

ease-in：加速

ease-out：減速

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

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

觸發(fā)過渡

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

局限性

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

（1）transition需要事件觸發(fā)，所以沒法在網(wǎng)頁加載時自動發(fā)生。

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

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

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

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

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

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

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

animation動畫屬性

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

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

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

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

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

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%的百分號都不能省略，0%可以由from代替，100%可以由to代替。要讓changeColor動畫有效果，就必須要通過CSS3animation屬性來調(diào)用它。

區(qū)別

animation屬性類似于transition，他們都是隨著時間改變元素的屬性值，其主要區(qū)別在于：transition需要觸發(fā)一個事件才會隨著時間改變其CSS屬性；animation在不需要觸發(fā)任何事件的情況下，也可以顯式的隨時間變化來改變元素CSS屬性，達到一種動畫的效果