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

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

CSS3 過渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。

要實現(xiàn)這一點，必須規(guī)定兩項內(nèi)容：

• 指定要添加效果的CSS屬性

• 指定效果的持續(xù)時間。

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

css3過渡屬性

復(fù)合屬性

過渡transition的這四個子屬性只有<transition-duration>是必需值且不能為0。其中，<transition-duration>和<transition-delay>都是時間。當(dāng)兩個時間同時出現(xiàn)時，第一個是<transition-duration>，第二個是<transition-delay>；當(dāng)只有一個時間時，它是<transition-duration>，而<transition-delay>為默認(rèn)值0

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

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

        .test {             border: 1px solid red;             width: 100px;             height: 50px;             transition: 2s;/*代表持續(xù)時間為2s，延遲時間為默認(rèn)值0 */             /* transition: 1s 2s; 代表持續(xù)時間為1s，延遲時間為2s */         }         .test:hover {             width: 300px;         }

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

相關(guān)子屬性

1、transition-property

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

注意：始終指定 transition-duration屬性，否則持續(xù)時間為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 數(shù)字: 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持續(xù)時間為2s，延遲時間為默認(rèn)值0；               background-color持續(xù)時間2s 延遲0.5s */         }          .test:hover {             width: 300px;             background-color: indianred;         }

效果圖：

2、transition-duration

transition-duration屬性規(guī)定完成過渡效果需要花費(fèi)的時間（以秒或毫秒計）。默認(rèn)值：0s。

[注意]該屬性不能為負(fù)值 。

[注意]若該屬性為0s則為默認(rèn)值，若為0則為無效值。所以必須帶單位 。

[注意]該值為單值時，即所有過渡屬性都對應(yīng)同樣時間；該值為多值時，過渡屬性按照順序?qū)?yīng)持續(xù)時間 。

3、transition-timing-function

transition-timing-function屬性指定切換效果的速度。它可以取一下幾個值。默認(rèn)值：ease 。

4、transition-delay

transition-delay屬性指定何時將開始切換效果，值是指以秒為單位（S）或毫秒（ms）。默認(rèn)值：0s。

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

[注意]該值為單值時，即所有過渡屬性都對應(yīng)同樣時間；該值為多值時，過渡屬性按照順序?qū)?yīng)持續(xù)時間 。

過渡階段

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

• 過渡起始值=過渡前的過渡屬性值；而過渡結(jié)束值=過渡完成后的過渡屬性值 。

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

• 以hover為例，若在元素非hover態(tài)時設(shè)置transition，相當(dāng)于設(shè)置的反向狀態(tài)。而前進(jìn)和反向是一致的。而如果在元素hover態(tài)設(shè)置transition，則前進(jìn)狀態(tài)以hover態(tài)設(shè)置的為準(zhǔn)，而反向狀態(tài)以非hover態(tài)設(shè)置的為準(zhǔn) 。

        .test {             border: 1px solid red;             width: 100px;             height: 50px;             transition: 3s;/* 設(shè)置反向狀態(tài) */         }         .test:hover {             width: 300px;             transition: 100ms;         }

效果:

觸發(fā)方式

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

• hover ： 鼠標(biāo)懸停觸發(fā) 。

• active ： 用戶單擊元素并按住鼠標(biāo)時觸發(fā) 。

• focus ： 獲得焦點時觸發(fā)。

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

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

（學(xué)習(xí)視頻分享：css視頻教程）