SS3 transition屬性允許CSS元素的屬性值在一定的時間區間內平滑地過渡。我們可以在不使用 Flash 動畫或 JavaScript 的情況下，在元素從一種樣式變換為另一種樣式時為元素添加效果。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，并圓滑地以動畫效果改變 CSS 的屬性值。接下來就一起去看看這個CSS3屬性吧!

一、CSS3的transition屬性

transition屬性的作用就是指定當你的元素某些樣式發生變化時，這些樣式可以漸漸過渡到最終屬性值。transition屬性是一個簡寫的復合屬性，其中包含了四個過渡屬性。

1、transition 簡寫的復合屬性，用于在一個屬性中設置四個過渡屬性。

2、transition-property 規定應用過渡的CSS屬性的名稱。

3、transition-duration 定義過渡效果花費的時間，默認是0。

4、transition-timing-function 規定過渡效果的時間曲線，默認是"ease"。

5、transition-delay 規定過渡效果何時開始，默認是0。

transition-property 用于產生過渡動畫的單個或多個屬性，或者過渡所有屬性的關鍵字all。

transition-duration 漸變時間屬性值為 “數值+s” ，代表多少時間完成過渡效果。

transition-timing-function 是可選屬性值。

有如下可選值

1、linear線性過渡，ease(默認)平滑過渡，ease-in由慢到快、由快到慢，ease-in-out由慢到快再到慢，

2、step-start等同 steps(1, start)，step-end等同 steps(1, end)

3、steps()兩個參數的步進函數。第一個參數為正整數，指定函數步數。第二個參數取值是start或end，指定每一步的值發生變化的時間點。第二個參數可選，默認值為end。

4、cubic-bezier(num, num, num, num)特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內。

transition-delay可選屬性值，設置延遲過渡(即設置多少時間后再開始過渡)，延遲的時間值為“數值+s”。該屬性可以對多個不同的屬性進行設置，用逗號隔開。

二，可用于過渡的屬性

不是所有的樣式都可以過渡，如說display:block不能過渡到display:inline-block。那么具體有哪些屬性可以用于過渡呢？下面列舉了部分可以用于過渡的屬性

部分可用于過渡的屬性示意圖

三、兼容性

transition屬性瀏覽器兼容性

transition屬性瀏覽器兼容性

注：Internet Explorer 9 以及更早的版本不支持 transition 屬性，且Chrome 25 以及更早的版本，需要前綴 -webkit-。

使用過渡屬性而不是腳本的另一個原因是腳本方法改變多個元素樣式可能會產生沖突，transition過渡屬性就不需要考慮這個問題元素與元素之間互不影響。元素過渡需要知道樣式具體的起始屬性和末尾屬性，如寬度從10px變化到100px。

四、transition屬性的運用

示例一

控制單個屬性（如width）過渡

改變單個屬性示例

示例二

控制多個屬性(如transform,background,background,height)過渡。

element{

-webkit-transition:-webkit-transform 5s,background 5s,width 5s,height 5s;

-moz-transition-property:width,height,-o-transform,background,;

-moz-transition-duration:5s,5s,5s,5s;

-o-transition-property:width,height,-o-transform,background;

-o-transition-duration:5s,5s,5s,5s;

transition-property:width,height,transform,background;

transition-duration:5s,5s,5s,5s;

}

感謝您閱讀了這篇文章，希望會對您有所幫助。喜歡我就關注我吧，后面的文章內容會越來越精彩喔！

天就來分享一些網頁中會用到的展示的小效果

很多欄目的邊框當鼠標移上去的時候，邊框會有移動的色澤變化，有順時針過渡或者逆時針過渡的效果

下面看看效果：

實現代碼：