本文参考CSS中文文档CSS3transition-timing-function属性过渡效果是从头到尾以同样的速度：transition-timing-function:linear;-webkit-transition-timing-function：线性；/*Safari和Chrome*/浏览器支持表中的数字表示第一个支持该属性的浏览器的版本号。紧接在-webkit-、-ms-或-moz-之前的数字是支持前缀属性的第一个浏览器的版本号。属性IEChromeFFsafariOpentransition-timing-function26.04.0-webkit-10.016.04.0-moz-6.13.1-webkit-12.110.5-o-属性定义及使用说明transition-timing-function属性指定切换效果的速度。此属性允许过渡效果更改其持续时间的速度。默认值：ease继承：no版本：CSS3JavaScript语法：object.style.transitionTimingFunction="linear"语法transition-timing-function：linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);该值描述了以相同速度开始和结束的线性过渡效果（等于cubic-bezier(0,0,1,1)）。ease指定开始缓慢，然后变快，然后缓慢结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。ease-in指定以低速开始的过渡效果（等于cubic-bezier(0.42,0,1,1)）。ease-out指定以低速结束的过渡（等于cubic-bezier(0,0,0.58,1)）。ease-in-out指定以低速开始和结束的过渡（等于cubic-bezier(0.42,0,0.58,1)）。cubic-bezier(n,n,n,n)在cubic-bezier函数中定义自己的值。可能的值是介于0和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;}/*Safari*/#div1{-webkit-transition-定时函数：线性；}#div2{-webkit-transition-timing-function：轻松；}#div3{-webkit-transition-timing-function：ease-in；}#div4{-webkit-transition-timing-function:ease-out;}#div5{-webkit-transition-timing-function:ease-in-out;}与上例相同，但指定速度曲线立方贝塞尔函数：#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{转换计时函数:cubic-bezier(0,0,0.58,1);}#div5{转换计时函数: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);}本文参考CSS中文文档
