【CSS3】transition過渡

標籤：ati   csdn   解析   checked   bsp   ref   多個   中間   tran   

一、transition

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

transition的屬性

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

img{ height:15px;

width:15px;

transition: 1s 1s height ease;/*合在一起*/ }

或者： img{ height：15px;

width: 15px;

transition-property: height;

transition-duration: 1s;

transition-delay: 1s;

transition-timing-function: ease;/*屬性分開寫*/ }

img:hover{ height: 450px; width: 450px; }

因為過渡所需要時間與過渡延遲時間的單位都是秒，所以在合起來寫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：三次貝茲路徑，可以定製 點擊這裡

觸發過渡

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

局限性

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

【CSS3】transition過渡