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;     } }

（學習視頻分享：css視頻教程）