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

新用户?

哎呀,出了点小问题,您可以稍后重试!

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

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

浏览:32289

相关技术文章博览

我要添加++

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

语法:

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-propertytransition-durationtransition-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