CSS3 transition-timing-function 屬性
實例
轉場效果以同樣的速度從開始到結束：
transition-timing-function: linear;
-webkit-transition-timing-function: linear; /* Safari and Chrome */
-webkit-transition-timing-function: linear; /* Safari and Chrome */
嘗試一下»
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
緊跟在-webkit-, -ms- 或-moz- 前的數字為支持該前綴屬性的第一個瀏覽器版本號。
| 属性 | |||||
|---|---|---|---|---|---|
| transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
屬性定義及使用說明
transition-timing-function屬性指定切換效果的速度。
此屬性允許一個過渡效果，以改變其持續時間的速度。
| 默認值： | ease |
|---|---|
| 繼承： | no |
| 版本： | CSS3 |
| JavaScript 語法： | object.style.transitionTimingFunction="linear" |
語法
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
| 值 | 描述 |
|---|---|
| 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 函數中定義自己的值。 可能的值是0 至1 之間的數值。 |
Tip: Try the different values in the examples below to understand how it works!
更多實例
實例
為了更好地理解不同的函數值：這裡有五個不同的div元素，用5個不同的值：
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
/* Safari */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
/* Safari */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
嘗試一下»
實例
和上面的例子一樣，但指定速度曲線立方貝塞爾曲線函數：
#div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
嘗試一下»