CSS3中Transitions屬性的使用方法

woff

在CSS 3中，Transitions功能通過將元素的某個屬性從一個屬性值在指定時間內平滑過渡到另一個屬性值來實現動畫功能。可通過transtions屬性來使用Transtions功能。

transtions屬性的使用方法如下所示：
transtion:property duration timing-function其中property表示屬性進行平滑過渡，duraton表示在多長時間內完成屬性值的平滑過渡，tinming-function表示通過什麼方法來進行平滑過渡。

1. div { width:120px; height:90px; background:blue; transition:background-color 2s linear; }
   
2. div:hover { background:orange; }

複製代碼

上面的實例中，把div元素的藍色背景在2秒鐘之內平滑過渡到橙色背景。
當然還有另外一種使用Transitions功能的方法，就是將Transitions屬性中的參數分開來寫，例如下面的代碼：

1. transtion-property:backgroud-color;
   
2. transtion-duration:1s;
   
3. tarnstion-timing-function:linear;

複製代碼

使用Transitions功能同時對於多個屬性值進行平滑過渡:

1. div {
   
2. height:90px; background:blue;
   
3. width:120px;
   
4. -moz-transition:background-color 1s linear,height 1s linear;
   
5. }
   
6. div:hover {
   
7. background:orange;
   
8. height:240px;
   
9. }

複製代碼

上面的實例中，元素從背景為藍色、高度為120像素平滑過渡到背景為橙色，高度為240像素。
使用Transitions功能實現元素的移動與旋轉動畫：

1. img {
   
2. position:absolute;
   
3. top:270px;
   
4. left:10px;
   
5. -moz-transform:rotate(0deg);
   
6. -moz-transition:left 5s linear,-moz-transform 1s linear;
   
7. }
   
8. img:hover {
   
9. left:230px;
   
10. -moz-transform:rotate(15deg);
    
11. }

複製代碼

上面的實例中，使定位圖片元素從距左邊距10像素、旋轉角度為0狀態平滑過渡到距左邊距230像素、旋轉15度。

www.dulady.com

看过必回，人品超好！












etsy baby