CSS 3 transition屬性

　　最近在瞭解移動框架的相關知識，在此之中發現了一部分動畫須要使用css 3種的動畫屬性，因而在閒暇時間瞭解了css3的動畫知識。因而寫本博客總結。

　　首先了解一下CSS 3中transition過渡屬性：

　　　　簡： transition:<transition-property>   <ransition-duration>  <transition-timing-function>  <transition-delay>;以下圖：

 

經過給相關元素添加transition樣式屬性就能夠爲此添加過渡的效果，以下圖中的logo圖像的:hover狀態下logo圖片會由透明度爲1到0過渡，具體代碼以下：

css 樣式代碼

 1 /************** 圓角邊框樣式 ******************/
 2         .radius-box {
 3             border-radius: 100px;
 4             -webkit-border-radius: 100px;
 5             -moz-border-radius: 100px;
 6             -o-border-radius: 100px;
 7         }
 8 
 9         /************** 容器樣式 ******************/
10         .container-box {
11             width: 100px;
12             height: 100px;
13             border: solid 5px #ccc;
14 
15         }
16 
17         /************** logo樣式 ******************/
18 
19         .logo {
20             width: 100px;
21             height: 100px;
22             border: solid 5px #ffffff;
23             box-sizing: border-box;
24             opacity: 1;
25             transition: opacity 1s ease .1s;
26             -webkit-transition: opacity 1s ease .1s; /* Safari 和 Chrome */
27             -moz-transition: opacity 1s ease .1s; /* Firefox 4 */
28             -o-transition: opacity 1s ease .1s;/* Opera */
29         }
30 
31         /************** logo:hover狀態下將opacity改成0 ******************/
32         .logo:hover {
33             opacity: 0;
34         }

 

HTML代碼

1 <!-- 容器 -->
2 <div class="container-box radius-box">
3     <!-- logo -->
4     <img class="logo radius-box" src="images/logo.jpeg" alt="logo圖片"/>
5     <!-- logo end -->
6 </div>
7 <!-- 容器 end -->

 效果

 

 

這個樣子仍是有點單調，因此如今在進行一下修飾，爲logo添加上第二個css屬性即 transform ；

transform：轉換屬性，本屬性主要的做用是對元素進行旋轉、縮放、移動或傾斜；

　　translate(x,y)：2D 轉換   點擊查看效果

　　scale(x,y)： 2D 縮放轉換   點擊查看效果

　　rotate(angle)：2D 旋轉，在參數中規定角度   點擊查看效果

　　skew(x-angle,y-angle): 沿着 X 和 Y 軸的 2D 傾斜轉換  點擊查看效果

以上是簡單的屬性介紹，接下來咱們來修改一下咱們的代碼：

新css 樣式代碼 

 1 /************** 圓角邊框樣式 ******************/
 2         .radius-box {
 3             border-radius: 100px;
 4             -webkit-border-radius: 100px;
 5             -moz-border-radius: 100px;
 6             -o-border-radius: 100px;
 7         }
 8 
 9         /************** 容器樣式 ******************/
10         .container-box {
11             width: 100px;
12             height: 100px;
13             border: solid 5px #ccc;
14 
15         }
16 
17         /************** logo樣式 ******************/
18 
19         .logo {
20             width: 100px;
21             height: 100px;
22             border: solid 5px #ffffff;
23             box-sizing: border-box;
24             opacity: 1;
25             transition: opacity 1s ease .1s, width 1s, height 1s,transform 1s;
26             -webkit-transition: opacity 1s ease .1s, width 1s, height 1s,transform 1s; /* Safari 和 Chrome */
27             -moz-transition: opacity 1s ease .1s, width 1s, height 1s,transform 1s; /* Firefox 4 */
28             -o-transition: opacity 1s ease .1s, width 1s, height 1s,transform 1s; /* Opera */
29         }
30 
31         /************** logo:hover狀態下將opacity改成0 ******************/
32         .logo:hover {
33             opacity: 0;
34             width: 0;
35             height: 0;
36             transform: translate(50px,50px);
37             -moz-transform: translate(50px,50px);
38             -webkit-transform: translate(50px,50px);
39             -o-transform: translate(50px,50px);
40         }

 

HTML結構不變。這樣修改後的效果爲： 

這樣修改之後效果會以前的更有感受。