您尚未登录，无法添加相关文章。 - 登录

新用户？

哎呀，出了点小问题，您可以稍后重试！

未填写内容或格式不正确！

CSS3 transition-timing-function使用参考指南

浏览：32291次

相关技术文章博览

我要添加++

基础知识(由张鑫旭整理编辑)[我要纠错]

语法：

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

相关属性 ：transition-property， transition-duration， transition-delay

取值：
ease：
ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
linear：
linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
ease-in：
ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
ease-out：
ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
ease-in-out：
ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier：
特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
说明：

此时间函数使用的是贝塞尔曲线。

此时间函数是一个光滑的曲线，从点P0 = (0,0) 到点P3 = (1,1)。P0-P1直线部分的长度和定位证明了在P0点的切线和曲率和P2-P3直线段在P3点的是一样的。transition-timing-function

兼容性：
类型 IEInternet Explorer FirefoxFirefox ChromeChrome OperaOpera SafariSafari
版本 (×)IE6 (×)Firefox 2.0 (?)Chrome 1.0.x (×)Opera 9.63 (√)Safari 3.1
(×)IE7 (×)Firefox 3.0 (√)Chrome 2.0.x (√)Safari 4
(×)IE8 (×)Firefox 3.5
 

代码与实例

CSS代码：
transition_function{
    -webkit-transform:rotate(10deg);
    -webkit-transition-property:all; 
    -webkit-transition-duration:0.5s; 
    -webkit-transition-timing-function:ease-in;
}
transition_function:hover{
    -webkit-transform:rotate(40deg);
}
HTML代码：
<img class="transition_function" src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
效果截图
CSS3 transition-timing-function效果截图
查看demo原页面>>

拓展知识点（由各前端同仁提供）

尚未添加拓展知识点！我来添加++
图片地址是：取消
插入：

我要分享

分享到：1