【CSS3】transition過渡和animation動畫

標籤：java   定義   sed   log   操作   何事   位置   例子   ima   

轉自：http://blog.csdn.net/XIAOZHUXMEN/article/details/52003135

寫在前面的話：

最近寫css動畫發現把tansition和animation弄混淆了，而且發現兩個動畫疊加後在一個元素上後，動畫效果沒有了，最後想的辦法是在裡面再包一層元素，把兩個動畫分開在不同的元素上，這樣動畫效果不受影響了。在網上找了一個tansition和animation的區別：

一、transition

CSS3的過渡功能就像是一種黃油，可以讓CSS的一些變化變得平滑。因為原生的CSS過渡在用戶端需要處理的資源要比用JavaScript和Flash少的多，所以才會更平滑。

transition的屬性

屬性可以分開寫，也可以放在一起寫,比如下面的代碼，圖片的寬高本來都是15px，想要讓它1秒的時間內過渡到寬高為450px，通過：hover來觸發，那麼代碼就可以如下：

 1 img{ 2     height:15px; 3     width:15px; 4     transition: 1s 1s height ease;/*合在一起*/ 5 } 6 或者： 7 img{ 8     height：15px; 9     width: 15px;10     transition-property: height;11     transition-duration: 1s;12     transition-delay: 1s;13     transition-timing-function: ease;/*屬性分開寫*/14 }15 img:hover{16     height: 450px;17     width: 450px;18 }

因為過渡所需要時間與過渡延遲時間的單位都是秒，所以在合起來寫transition的屬性的時候，第一個time會解析為transiton-duration，第二個解析為transition-delay。所以，可以給transition一個速記法

transiton: 過渡屬性 過渡所需要時間 過渡動畫函數 過渡延遲時間；

屬性詳解transition-property

不是所有屬性都能過渡，只有屬性具有一個中間點值才具備過渡效果。完整列表，見這個列表 ，具體效果，見 這個頁面。

transition-duration

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

transiton-timing-function

過渡函數，有如下幾種：

liner ：勻速 ease-in：減速 ease-out：加速 ease-in-out：先加速再減速 cubic-bezier：三次貝茲路徑，可以定製 點擊這裡

點擊這裡：http://cubic-bezier.com/#.06,.88,.84,.24

觸發過渡

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

局限性

transition的優點在於簡單易用，但是它有幾個很大的局限。 
（1）transition需要事件觸發，所以沒法在網頁載入時自動發生。 
（2）transition是一次性的，不能重複發生，除非一再觸發。 
（3）transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。 
（4）一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。 
CSS Animation就是為瞭解決這些問題而提出的。

 

二、animation

CSS3的animation屬性可以像Flash製作動畫一樣，通過控制主要畫面格來控制動畫的每一步，實現更為複雜的動畫效果。ainimation實現動畫效果主要由兩部分組成：

1）通過類似Flash動畫中的幀來聲明一個動畫； 
2）在animation屬性中調用主要畫面格聲明的動畫。

Note：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首碼。舉個例子：

 1 div:hover { 2   -webkit-animation: 1s changeColor; 3   animation: 1s changeColor;   4 } 5  6 @-webkit-keyframes changeColor { 7   0% { background: #c00; } 8   50% { background: orange; } 9   100% { background: yellowgreen; }10 }11 @keyframes changeColor {12   0% { background: #c00; }13   50% { background: orange; }14   100% { background: yellowgreen; }15 }

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

區別

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

我做了一個小例子，使用animation來類比PPT播放，實現了從左邊進，從上面進，放大，縮小和旋轉。地址：這裡 

 

 

【CSS3】transition過渡和animation動畫