CSS3使用transition屬性實現過渡效果
阿新 • • 發佈：2019-03-23
毫秒 kit ace syn bic mar spa ima 應用
transition屬性目的是讓css的一些屬性（如background）的以平滑過渡的效果出現。它是一個合並屬性，是由以下四個屬性組合而成：
- transition-property：設置應用過渡的CSS屬性，如background。
- transition-duration：設置過渡效果花費的時間。默認是 0。
- transition-timing-function：設置過渡效果的時間曲線。默認是 "ease"。
- transition-delay：規定過渡效果何時開始。默認是 0。
示例：
?| 1 2 3 4 |
button{
transition: background 1s;
-webkit-transition: background 1s; /* Safari */
}
|
定義transition屬性時，transition-property和transition-duration是必選，其他兩個為可選。
transition-property和transition-duration css3動畫
transition-property用來指定應用過渡效果的CSS屬性，這些屬性包括（可能不全）：
- width
- height
- color
- background (color, image, position)
- transform (in the next post)
- border (color, width)
- position (top, bottom, left, right )
- text (size, weight, shadow, word-spacing)
- margin
- padding
- opacity
- visibility
- z-index
- all
transition-duration屬性用來設置指定屬性的過渡效果花費時間，可以是秒（s）或者毫秒（ms）。
transition-delay和transition-timing-function
transition-delay用來設置過渡效果開始的時間，默認為0，可以是秒（s）或者毫秒（ms）css3鼠標經過 。如果transition-delay是負數，表示過渡效果提前開始。
transition-timing-function用來設置過渡的效果，這些效果包括：
- ease - 開始慢，中間快，結束慢
- ease-in - 漸入效果，慢入快出
- ease-out - 漸出效果，快入慢出.
- ease-in-out - 開始慢和結束慢
- cubic-bezier(n,n,n,n) - 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值
示例：
?| 1 2 3 4 |
button{
transition: background 1s ease-in-out 2s;
-webkit-transition: background 1s ease-in-out 2s; /* Safari */
}
|
多屬性
對於多個屬性，各個屬性的效果以逗號隔開：
?| 1 2 3 4 |
button{
transition: background 1s ease-in-out 2s, width 2s linear;
-webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */
}
|
兼容性
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 屬性。
Safari 支持替代的 -webkit-transition 屬性。
Internet Explorer 9 以及更早版本的瀏覽器不支持 transition 屬性。
觸發
需要註意的是，過渡效果是需要之前已經定義好了屬性，過渡效果通過觸發來應用，比如:hover, :focus, and :active等。
CSS3使用transition屬性實現過渡效果