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