css transition ease,CSS transition-timing-function 属性

亲自试一试 - 实例

实例 1

为了更好地理解不同的函数值，请看下面带有五个不同值的五个不同的 div 元素：

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

/* Firefox 4: */

#div1 {-moz-transition-timing-function: linear;}

#div2 {-moz-transition-timing-function: ease;}

#div3 {-moz-transition-timing-function: ease-in;}

#div4 {-moz-transition-timing-function: ease-out;}

#div5 {-moz-transition-timing-function: ease-in-out;}

/* Safari and Chrome: */

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

/* Opera: */

#div1 {-o-transition-timing-function: linear;}

#div2 {-o-transition-timing-function: ease;}

#div3 {-o-transition-timing-function: ease-in;}

#div4 {-o-transition-timing-function: ease-out;}

#div5 {-o-transition-timing-function: ease-in-out;}

实例 2

与上例相同，但通过 cubic-bezier 来规定速度曲线：

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

/* Firefox 4: */

#div1 {-moz-transition-timing-function: cubic-bezier(0,0,0.25,1);}

#div2 {-moz-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}

#div3 {-moz-transition-timing-function: cubic-bezier(0.42,0,1,1);}

#div4 {-moz-transition-timing-function: cubic-bezier(0,0,0.58,1);}

#div5 {-moz-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

/* Safari and Chrome: */

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

/* Opera: */

#div1 {-o-transition-timing-function: cubic-bezier(0,0,1,1;}

#div2 {-o-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}

#div3 {-o-transition-timing-function: cubic-bezier(0.42,0,1,1);}

#div4 {-o-transition-timing-function: cubic-bezier(0,0,0.58,1);}

#div5 {-o-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}