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

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

1、 CSS3變形（transform）

語法：

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

1.一、旋轉rotate（）

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

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

1.二、移動translate（X,Y）

transform(100px,20px);

transform:translateX(100px):

transform:translateY(20px)

1.三、縮放scale（X,Y）

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

1.四、斜切skew()

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

transform:skew(30deg,10deg);

2、CSS3過渡（transition）

屬性詳解

transition-property

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

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

transiton-timing-function

過渡函數，有以下幾種：

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

觸發過渡

單純的代碼不會觸發任何過渡操做，須要經過用戶的行爲（如點擊，懸浮等）觸發，可觸發的方式有：
:hoever :focus :checked 媒體查詢觸發 JavaScript觸發

侷限性

transition的優勢在於簡單易用，可是它有幾個很大的侷限。

• （1）transition須要事件觸發，因此無法在網頁加載時自動發生。
• （2）transition是一次性的，不能重複發生，除非一再觸發。
• （3）transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。
• （4）一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。

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

3、CSS3 animation(動畫)

CSS3的animation屬性能夠像Flash製做動畫同樣，經過控制關鍵幀來控制動畫的每一步，實現更爲複雜的動畫效果。ainimation實現動畫效果主要由兩部分組成：

1）經過相似Flash動畫中的幀來聲明一個動畫；
2）在animation屬性中調用關鍵幀聲明的動畫。**

注：animation屬性到目前位置獲得了大多數瀏覽器的支持，可是，須要添加瀏覽器前綴哦！

animation動畫屬性

仍是先列表格來講明屬性，本身感受會比較清晰：

（1）animation-name：none爲默認值，將沒有任何動畫效果，其能夠用來覆蓋任何動畫
（2）animation-duration：默認值爲0，意味着動畫週期爲0，也就是沒有任何動畫效果
（3）animation-timing-function：與transition-timing-function同樣
（4）animation-delay：在開始執行動畫時須要等待的時間
（5）animation-iteration-count：定義動畫的播放次數，默認爲1，若是爲infinite，則無限次循環播放
（6）animation-direction：默認爲nomal，每次循環都是向前播放，（0-100），另外一個值爲alternate，動畫播放爲偶數次則向前播放，若是爲基數詞就反方向播放
（7）animation-state：默認爲running，播放，paused，暫停
（8）animation-fill-mode：定義動畫開始以前和結束以後發生的操做，默認值爲none，動畫結束時回到動畫沒開始時的狀態；forwards，動畫結束後繼續應用最後關鍵幀的位置，即保存在結束狀態；backwards，讓動畫回到第一幀的狀態；both：輪流應用forwards和backwards規則。

@keyframes
CSS3的animation製做動畫效果主要包括兩部分：1. 用關鍵幀聲明一個動畫，2.在animation調用關鍵幀聲明的的動畫。

@keyframes就是關鍵幀。這個幀與Flash裏的幀相似，一個動畫中能夠有不少個幀。

一個@keyframes中的樣式規則是由多個百分比構成的，能夠在這個規則上建立多個百分比，從而達到一種不斷變化的效果。另外，@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屬性來調用它。

區別

animation屬性相似於transition，他們都是隨着時間改變元素的屬性值，其主要區別在於：transition須要觸發一個事件纔會隨着時間改變其CSS屬性；animation在不須要觸發任何事件的狀況下，也能夠顯式的隨時間變化來改變元素CSS屬性，達到一種動畫的效果