閱讀(32.9k) 書簽贊(3) 我要糾錯

CSS3 transition-timing-function 屬性

2022-06-02 17:26 更新

CSS3 transition-timing-function 屬性

屬性定義及使用說明

transition-timing-function屬性指定切換效果的速度。

此屬性允許一個過渡效果，以改變其持續(xù)時間的速度。

默認(rèn)值：	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	規(guī)定以相同速度開始至結(jié)束的過渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	規(guī)定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	規(guī)定以慢速結(jié)束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	規(guī)定以慢速開始和結(jié)束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函數(shù)中定義自己的值?？赡艿闹凳?0 至 1 之間的數(shù)值。

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號。

緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個瀏覽器版本號。

屬性
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-

實例

轉(zhuǎn)場效果以同樣的速度從開始到結(jié)束：

transition-timing-function: linear;
-webkit-transition-timing-function: linear; /* Safari and Chrome */

嘗試一下 ?

實例

為了更好地理解不同的函數(shù)值：這里有五個不同的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;}

嘗試一下 ?

實例

和上面的例子一樣，但指定速度曲線立方貝塞爾曲線函數(shù)：

#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);}

嘗試一下 ?

以上內(nèi)容是否對您有幫助：

← CSS3 transition-property 屬性

CSS unicode-bidi 屬性 →

寫筆記

我要補充

CSS3 transition-timing-function 屬性

CSS3 transition-timing-function 屬性

屬性定義及使用說明

語法

瀏覽器支持

實例

實例

更多實例

實例

實例