transition-timing-function

transition-timing-function，是檢索或設定對象中過渡的動畫類型。

基本介紹

• 外文名：transition-timing-function
• 默認值：ease
• ease-in：由慢到快
• linear：線性過渡

簡介

transition-timing-function

語法：

transition-timing-function：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )[ ,linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ) ]*

默認值：ease

取值：

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)

cubic-bezier(, , , )：

特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內

說明：

檢索或設定對象中過渡的動畫類型。

如果提供多個屬性值，以逗號進行分隔。

對應的腳本特性為transitionTimingFunction。

寫法：

核心類型寫法

Webkit(Chrome/Safari)-webkit-transition-timing-function

Gecko(Firefox)-moz-transition-timing-function

Presto(Opera)-o-transition-timing-function

Trident(IE)-ms-transition-timing-function

W3Ctransition-timing-function

示例

h1 {

font - size: 16px;

}.test {

overflow: hidden;

width: 100 % ;

margin: 0;

padding: 0;

list - style: none;

}.test li {

position: relative;

left: 8px;

width: 220px;

height: 100px;

margin: 1px 5px;

padding: 10px;

border: 1px solid#ddd;

background - color: #eee;

color: #000; - moz - transition - property: left; - moz - transition - duration: .5s; - webkit - transition - property: left; - webkit - transition - duration: .5s; - o - transition - property: left; - o - transition - duration: .5s; - ms - transition - property: left; - ms - transition - duration: .5s;

transition - property: left;

transition - duration: .5s;

}.test li: nth - child(1) { - moz - transition - timing -

function: linear; - webkit - transition - timing -

function: linear; - o - transition - timing -

function: linear; - ms - transition - timing -

function: linear;

transition - timing -

function: linear;

}.test li: nth - child(2) { - moz - transition - timing -

function: ease; - webkit - transition - timing -

function: ease; - o - transition - timing -

function: ease; - ms - transition - timing -

function: ease;

transition - timing -

function: ease;

}.test li: nth - child(3) { - moz - transition - timing -

function: ease - in; - webkit - transition - timing -

function: ease - in; - o - transition - timing -

function: ease - in; - ms - transition - timing -

function: ease - in;

transition - timing -

function: ease - in;

}.test li: nth - child(4) { - moz - transition - timing -

function: ease - out; - webkit - transition - timing -

function: ease - out; - o - transition - timing -

function: ease - out; - ms - transition - timing -

function: ease - out;

transition - timing -

function: ease - out;

}.test li: nth - child(5) { - moz - transition - timing -

function: ease - in-out; - webkit - transition - timing -

function: ease - in-out; - o - transition - timing -

function: ease - in-out; - ms - transition - timing -

function: ease - in-out;

transition - timing -

function: ease - in-out;

}.test li: hover {

left: 100px;

}請將滑鼠移動到下面的矩形上：linear: 線性過渡ease: 平滑過渡ease - in:由慢到快ease - out: 由快到慢ease - in-out: 由慢到快再到慢abc