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