CSS3 transition 屬性過渡效果 詳解

CSS3 transition 允許 CSS 元素的屬性值在一定的時間區間內平滑地過渡。我們可以在不使用 Flash 動畫或 JavaScript 的情況下，在元素從一種樣式變換為另一種樣式時為元素添加效果。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變 CSS 的屬性值。以下是 transition 屬性的瀏覽器支持、語法和示例。

瀏覽器支持：

Internet Explorer 10 及以上版本、Firefox、Chrome 以及 Opera 支持 transition 屬性。Safari 需要前綴 -webkit-。Internet Explorer 9 以及更早的版本不支持 transition 屬性。Chrome 25 以及更早的版本，需要前綴 -webkit-。

語法:

transition 屬性主要包含四個屬性值：transition-property -- 規定應用過渡的 CSS 屬性的名稱；transition-duration -- 定義過渡效果花費的時間，默認是 0；transition-timing-function -- 規定過渡效果的時間曲線。默認是 "ease"；transition-delay -- 規定過渡效果何時開始，默認是 0。transition -- 簡寫屬性，用於在一個屬性中設置四個過渡屬性。如需向多個樣式添加過渡效果，請添加多個屬性，由逗號隔開。

 

一、改變寬度屬性

div.css3-transition-test1 {
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: ease-in;
    transition-delay: 0;
    /* Firefox 4 */
    -moz-transition-property: width;
    -moz-transition-duration: 1s;
    -moz-transition-timing-function: ease-in;
    -moz-transition-delay: 0;
    /* Safari and Chrome */
    -webkit-transition-property: width;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-delay: 0;
    /* Opera */
    -o-transition-property: width;
    -o-transition-duration: 1s;
    -o-transition-timing-function: ease-in;
    -o-transition-delay: 0;
}

 

或

 

div.css3-transition-test1 {
    transition: width 1s ease-in;
    -moz-transition: width 1s ease-in; /* Firefox 4 */
    -webkit-transition: width 1s ease-in; /* Safari and Chrome */
    -o-transition: width 1s ease-in; /* Opera */ 
}

 

二、改變多個屬性

p.css3-transition-test2:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

 

以上是在網上找的例子：有點問題，我自己是這樣寫的

.yangsheng_guan_5_1{
　　opacity:0; /* 0 相當於隱藏*/
　　display:block;
　　transition:0.6s; /*過渡時間*/
　　-webkit-transition: .6s; /*老版本火狐 瀏覽器*/
　　-moz-transition: .6s; /* Firefox 4 */
　　-o-transition: .2s; /*Safari　Chrome 瀏覽器*/
}
.yangsheng_guan_5:hover .yangsheng_guan_5_1{
　　opacity:1; /* 1 相當於顯示*/
}