css3過(guò)渡采用的屬性有：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 過(guò)渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。

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

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

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

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

css3過(guò)渡屬性

復(fù)合屬性

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

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

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

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

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

相關(guān)子屬性

1、transition-property

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

注意：始終指定 transition-duration屬性，否則持續(xù)時(shí)間為0，transition不會(huì)有任何效果。

1）、可過(guò)渡的樣式

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

顏色: color background-color border-color outline-color 位置: backround-position left right top bottom 長(zhǎng)度:      [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ù)時(shí)間為2s，延遲時(shí)間為默認(rèn)值0；               background-color持續(xù)時(shí)間2s 延遲0.5s */         }          .test:hover {             width: 300px;             background-color: indianred;         }

效果圖：

2、transition-duration

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

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

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

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

3、transition-timing-function

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

4、transition-delay

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

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

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

過(guò)渡階段

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

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

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

• 以hover為例，若在元素非hover態(tài)時(shí)設(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ā)方式

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

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

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

• focus ： 獲得焦點(diǎn)時(shí)觸發(fā)。

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

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

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