站長(zhǎng)資訊網(wǎng)
有5個(gè)：1、transition-property屬性；2、transition-duration屬性；3、transition-timing-function屬性；4、transition-delay屬性；5、transition屬性。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css3過渡(transition)允許我們?cè)谙薅ǖ臅r(shí)間內(nèi)從一個(gè)屬性值轉(zhuǎn)變到另一個(gè)屬性值。
css3過度屬性有5個(gè)：
| 屬性 | 描述 | CSS |
|---|---|---|
| transition | 簡(jiǎn)寫屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過渡屬性。 | 3 |
| transition-property | 規(guī)定應(yīng)用過渡的 CSS 屬性的名稱。 | 3 |
| transition-duration | 定義過渡效果花費(fèi)的時(shí)間。默認(rèn)是 0。 | 3 |
| transition-timing-function | 規(guī)定過渡效果的時(shí)間曲線。默認(rèn)是 "ease"。 | 3 |
| transition-delay | 規(guī)定過渡效果何時(shí)開始。默認(rèn)是 0。 | 3 |
示例：
在一個(gè)例子中使用所有過渡屬性：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div { width: 100px; height: 100px; background: red; transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /* Safari */ -webkit-transition-property: width; -webkit-transition-duration: 1s; -webkit-transition-timing-function: linear; -webkit-transition-delay: 2s; } div:hover { width: 200px; } </style> </head> <body> <div></div> <p>鼠標(biāo)移動(dòng)到 div 元素上，查看過渡效果。</p> <p><b>注意：</b> 過渡效果需要等待兩秒后才開始。</p> </body> </html>
與上面的例子相同的過渡效果，但是使用了簡(jiǎn)寫的 transition 屬性：
上面示例中div{}中那么多的過渡代碼
div { transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /* Safari */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; }
其實(shí)只需要利用簡(jiǎn)寫的 transition 屬性，用兩行代碼即可搞定：
div { transition: width 1s linear 2s; /* Safari */ -webkit-transition:width 1s linear 2s; }
（學(xué)習(xí)視頻分享：css視頻教程）
