CSS3中的變形（transform）、過渡（transition）、動畫（animation）屬性

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

一、 CSS3變形（transform）

語法：

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

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

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

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

1.2、移動translate（X,Y）

transform(100px,20px);

transform:translateX(100px):

transform:translateY(20px)

1.3、縮放scale（X,Y）

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

1.4、斜切skew()

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

transform:skew(30deg,10deg);

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

二、CSS3過渡（transition）

屬性詳解

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)和結束狀態(tài)，不能定義中間狀態(tài)，也就是說只有兩個狀態(tài)。
• （4）一條transition規(guī)則，只能定義一個屬性的變化，不能涉及多個屬性。

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

三、CSS3 animation(動畫)

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

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

注：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：定義動畫開始之前和結束之后發(fā)生的操作，默認值為none，動畫結束時回到動畫沒開始時的狀態(tài)；forwards，動畫結束后繼續(xù)應用最后關鍵幀的位置，即保存在結束狀態(tài)；backwards，讓動畫回到第一幀的狀態(tài)；both：輪流應用forwards和backwards規(guī)則。

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

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

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

web前端開發(fā)學習Q-q-u-n： 731771211，分享學習的方法和需要注意的小細節(jié)，不停更新最新的教程和學習方法（詳細的前端項目實戰(zhàn)教學視頻，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%的百分號都不能省略，0%可以由from代替，100%可以由to代替。要讓changeColor動畫有效果，就必須要通過CSS3animation屬性來調(diào)用它。

區(qū)別

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