# 過渡效果 CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。 盡管 CSS3 過渡效果是足夠的過渡的一個元素,但是 text-transform 屬性可以提高 CSS3 過渡效果的風格。 主要有四個屬性的CSS3轉換效果,已被描述如下: - transition-property - transition-duration - transition-timing-function - transition-delay **注意：**Internet Explorer 10, Firefox, Opera, Chrome, 和Opera 支持transition 屬性。Safari 需要前綴 -webkit-。Internet Explorer 9 以及更早的版本，不支持 transition 屬性。Chrome 25 以及更早的版本，需要前綴 -webkit- ### transition-property 規定應用過渡的 CSS 屬性的名稱。 ~~~ transition-property: all; transition-property: none; transition-property: background-color; transition-property: background-color, height, width; ~~~ ### transition-duration 定義過渡效果花費的時間。默認是 0。 時間單位可以是秒/毫秒。 ~~~ transition-duration: 2s; transition-duration: 1000ms; transition-duration: 1000ms, 2000ms; ~~~ ### transition-timing-function 規定過渡效果的時間曲線。默認是 "ease"。 ~~~ transition-timing-function: ease; transition-timing-function: ease-in; transition-timing-function: ease-in-out; transition-timing-function: ease, linear; transition-timing-function: cubic-bezier(1.000, 0.835, 0.000, 0.945); ~~~ 其中： - linear：線性過渡。等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0) - ease：平滑過渡。等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0) - ease-in：由慢到快。等同于貝塞爾曲線(0.42, 0, 1.0, 1.0) - ease-out：由快到慢。等同于貝塞爾曲線(0, 0, 0.58, 1.0) - ease-in-out：由慢到快再到慢。等同于貝塞爾曲線(0.42, 0, 0.58, 1.0) - step-start：等同于 steps(1, start) - step-end：等同于 steps(1, end) - steps(`<integer>[, [ start | end ] ]?`)：接受兩個參數的步進函數。第一個參數必須為正整數，指定函數的步數。第二個參數取值可以是start或end，指定每一步的值發生變化的時間點。第二個參數是可選的，默認值為end。 - cubic-bezier(`<number>, <number>, <number>, <number>`)：特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內 ### transition-delay 規定過渡效果何時開始。默認是 0。 ~~~ transition-delay: 2s; transition-delay: 1000ms, 2000ms; transition-delay: -2s; ~~~ ### 源碼 本文中所用例子源碼參見[https://github.com/waylau/css3-tutorial](https://github.com/waylau/css3-tutorial) 中 `samples` 目錄下的 transitions.html