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 */

嘗試一下 ?

Examples

更多實例

實例

為了更好地理解不同的函數(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)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號