css3過渡採用什麼屬性

css3過渡採用的屬性有：1、transition；2、transition-property；3、transition-duration；4、transition-timing-function；5、transition-delay。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。

要實現這一點，必須規定兩項內容：

• 指定要新增效果的CSS屬性

• 指定效果的持續時間。

通過過渡transition屬性，可以讓web前端開發人員不需要javascript就可以實現簡單的動畫互動效果，要實現這一點，必須實現一項內容，即指定效果的持續時間。

css3過渡屬性

複合屬性

過渡transition的這四個子屬性只有<transition-duration>是必需值且不能為0。其中，<transition-duration>和<transition-delay>都是時間。當兩個時間同時出現時，第一個是<transition-duration>，第二個是<transition-delay>；當只有一個時間時，它是<transition-duration>，而<transition-delay>為預設值0

transition: <transition-property> || <transition-duration> || 
<transition-timing-function> || <transition-delay>

[注意]transition的這四個子屬性之間不能用逗號隔開，只能用空格隔開。因為逗號隔開的代表不同的屬性(transition屬性支援多值，多值部分稍後介紹)；而空格隔開的代表不同屬性的四個關於過渡的子屬性。

        .test {
            border: 1px solid red;
            width: 100px;
            height: 50px;
            transition: 2s;/*代表持續時間為2s，延遲時間為預設值0 */
            /* transition: 1s 2s; 代表持續時間為1s，延遲時間為2s */
        }
        .test:hover {
            width: 300px;
        }

    <div class="test"></div>

相關子屬性

1、transition-property

transition-property屬性指定CSS屬性的nametransition效果（transition效果時將會啟動指定的CSS屬性的變化）。none: 沒有指定任何樣式，all: 預設值，表示指定元素所有支援transition-property屬性的樣式。<transition-property>: 可過渡的樣式，可用逗號分開寫多個樣式。

注意：始終指定 transition-duration屬性，否則持續時間為0，transition不會有任何效果。

1）、可過渡的樣式

不是所有的CSS樣式值都可以過渡，只有具有中間值的屬性才具備過渡效果 ,具體如下

顏色: color background-color border-color outline-color
位置: backround-position left right top bottom
長度: 
    [1]max-height min-height max-width min-width height width
    [2]border-width margin padding outline-width outline-offset
    [3]font-size line-height text-indent vertical-align  
    [4]border-spacing letter-spacing word-spacing
數位: opacity visibility z-index font-weight zoom
組合: text-shadow transform box-shadow clip
其他: gradient

        .test {
            border: 1px solid red;
            width: 100px;
            height: 50px;
            background-color: lightblue;
            transition: width 2s, background-color 2s ease 0.5s;
            /*代表width持續時間為2s，延遲時間為預設值0；
              background-color持續時間2s 延遲0.5s */
        }

        .test:hover {
            width: 300px;
            background-color: indianred;
        }

效果圖：

2、transition-duration

transition-duration屬性規定完成過渡效果需要花費的時間（以秒或毫秒計）。預設值：0s。

[注意]該屬性不能為負值 。

[注意]若該屬性為0s則為預設值，若為0則為無效值。所以必須帶單位 。

[注意]該值為單值時，即所有過渡屬性都對應同樣時間；該值為多值時，過渡屬性按照順序對應持續時間 。

3、transition-timing-function

transition-timing-function屬性指定切換效果的速度。它可以取一下幾個值。預設值：ease 。

4、transition-delay

transition-delay屬性指定何時將開始切換效果，值是指以秒為單位（S）或毫秒（ms）。預設值：0s。

[注意]該屬性若為負值，無延遲效果，但過渡元素的起始值將從0變成設定值(設定值=延遲時間+持續時間)。若該設定值小於等於0，則無過渡效果；若該設定值大於0，則過渡元素從該設定值開始完成剩餘的過渡效果 [注意]若該屬性為0s則為預設值，若為0則為無效值。所以必須帶單位 。

[注意]該值為單值時，即所有過渡屬性都對應同樣時間；該值為多值時，過渡屬性按照順序對應持續時間 。

過渡階段

• 過渡開始時間=樣式改變的時刻+過渡延遲時間；而過渡結束時間=過渡開始時間+過渡持續時間。

• 過渡起始值=過渡前的過渡屬性值；而過渡結束值=過渡完成後的過渡屬性值 。

• 過渡分為兩個階段：前進(forward)和反向(reverse)。若前進階段進行一段時間後進入反向階段，則反向階段的初始值是前進階段結束時的瞬時值

• 以hover為例，若在元素非hover態時設定transition，相當於設定的反向狀態。而前進和反向是一致的。而如果在元素hover態設定transition，則前進狀態以hover態設定的為準，而反向狀態以非hover態設定的為準 。

        .test {
            border: 1px solid red;
            width: 100px;
            height: 50px;
            transition: 3s;/* 設定反向狀態 */
        }
        .test:hover {
            width: 300px;
            transition: 100ms;
        }

效果:

觸發方式

一般地，過渡transition的觸發有三種方式，分別是偽類觸發、媒體查詢觸發和javascript觸發。其中常用偽類觸發包括:hover、:focus、:active等 。

• hover ： 滑鼠懸停觸發 。

• active ： 使用者單擊元素並按住滑鼠時觸發 。

• focus ： 獲得焦點時觸發。

• @media觸發 ： 符合媒體查詢條件時觸發 。

/* 把瀏覽器的寬度拖動到小於1000px時觸發 */
@media (max-width: 1000px){
    .test{
        width: 500px;
    }
}

（學習視訊分享：）

以上就是css3過渡採用什麼屬性的詳細內容，更多請關注TW511.COM其它相關文章！