建站
咨詢
售后
建站咨詢
新聞中心
目前創(chuàng)新互聯(lián)已為千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站改版維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、錦屏網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
CSS 中提供了 5 個(gè)有關(guān)過渡的屬性，如下所示：
- transition-property：設(shè)置元素中參與過渡的屬性；
- transition-duration：設(shè)置元素過渡的持續(xù)時(shí)間；
- transition-timing-function：設(shè)置元素過渡的動(dòng)畫類型；
- transition-delay：設(shè)置過渡效果延遲的時(shí)間，默認(rèn)為 0；
- transition：簡寫屬性，用于同時(shí)設(shè)置上面的四個(gè)過渡屬性。
要成功實(shí)現(xiàn)過渡效果，必須定義以下兩項(xiàng)內(nèi)容：
- 元素中參數(shù)與過渡效果的屬性；
- 過渡效果持續(xù)的時(shí)間。
提示：過渡效果通常會(huì)在鼠標(biāo)懸停在元素上時(shí)發(fā)生，如果未設(shè)置過渡持續(xù)的時(shí)間，則過渡效果不會(huì)生效，因?yàn)檫^渡時(shí)間的默認(rèn)值為 0。
1. transition-property
transition-property 屬性用來設(shè)置元素中參與過渡的屬性名稱，語法格式如下：
transition-property: none | all | property;
參數(shù)說明如下：
- none：表示沒有屬性參與過渡效果；
- all：表示所有屬性都參與過渡效果；
- property：定義應(yīng)用過渡效果的 CSS 屬性名稱列表，多個(gè)屬性名稱之間使用逗號(hào)
,進(jìn)行分隔。
示例代碼如下：
2. transition-duration
transition-duration 屬性用來設(shè)置過渡需要花費(fèi)的時(shí)間（單位為秒或者毫秒），語法格式如下：
transition-duration: time;
其中，time 為完成過渡效果需要花費(fèi)的時(shí)間（單位為秒或毫秒），默認(rèn)值為 0，意味著不會(huì)有效果。
如果有多個(gè)參與過渡的屬性，也可以依次為這些屬性設(shè)置過渡需要的時(shí)間，多個(gè)屬性之間使用逗號(hào)進(jìn)行分隔，例如
transition-duration: 1s, 2s, 3s;。除此之外，也可以使用一個(gè)時(shí)間來為所有參與過渡的屬性設(shè)置過渡所需的時(shí)間。示例代碼如下：
運(yùn)行效果如下圖所示：
圖：transition-duration 屬性演示
3. transition-timing-function
transition-timing-function 屬性用來設(shè)置過渡動(dòng)畫的類型，屬性的可選值如下：
| 值 | 描述 |
|---|---|
| linear | 以始終相同的速度完成整個(gè)過渡過程，等同于 cubic-bezier(0,0,1,1) |
| ease | 以慢速開始，然后變快，然后慢速結(jié)束的順序來完成過渡過程，等同于 cubic-bezier(0.25,0.1,0.25,1) |
| ease-in | 以慢速開始過渡的過程，等同于 cubic-bezier(0.42,0,1,1) |
| ease-out | 以慢速結(jié)束過渡的過程，等同于 cubic-bezier(0,0,0.58,1) |
| ease-in-out | 以慢速開始，并以慢速結(jié)束的過渡效果，等同于 cubic-bezier(0.42,0,0.58,1) |
| cubic-bezier(n, n, n, n) | 使用 cubic-bezier() 函數(shù)來定義自己的值，每個(gè)參數(shù)的取值范圍在 0 到 1 之間 |
示例代碼如下：
4. transition-delay
transition-delay 屬性用來設(shè)置過渡效果何時(shí)開始，屬性的語法格式如下：
transition-delay: time;
其中，參數(shù) time 用來設(shè)置在過渡效果開始之前需要等待的時(shí)間，單位為秒或毫秒。
示例代碼如下：
運(yùn)行效果如下圖所示：
圖：transition-delay 屬性演示
5. transition
transition 屬性是上面四個(gè)屬性的簡寫形式，通過該屬性可以同時(shí)設(shè)置上面的四個(gè)屬性，屬性的語法格式如下：
transition: transition-property transition-duration transition-timing-function transition-delay;
transition 屬性中，transition-property 和 transition-duration 為必填參數(shù)，transition-timing-function 和 transition-delay 為選填參數(shù)，如非必要可以省略不寫。另外，通過 transition 屬性也可以設(shè)置多組過渡效果，每組之間使用逗號(hào)進(jìn)行分隔，示例代碼如下：
運(yùn)行效果如下圖所示：
圖：transition 屬性演示
上面的代碼也可以寫成如下所示的樣子：
網(wǎng)站名稱：CSStransition（過渡效果）詳解
網(wǎng)站URL：http://www.5511xx.com/article/dphjiog.html
