www.baike369.com
百科369 > CSS3教程 > CSS3 transition-timing-function属性

CSS3 transition-timing-function属性


定义

CSS3的transition-timing-function属性描述动画播放的方法。


语法

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]区域内,否则无效。

说明

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

贝塞尔曲线


兼容性

CSS3 Safari 4, Chrome 2.0

示例

源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS3 transition-timing-function属性示例-www.baike369.com</title>
<style type="text/css">
body{margin:100px;}
.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);
}
</style>
</head>
<body>
<h1>CSS3 transition-timing-function属性示例</h1>
<p>将鼠标移到图片上,图片会旋转!</p>
<br />
<p><img class="transition_function" src="append/20111104.jpg" width="240" height="179" /></p>
</body>
</html>

CSS3 transition-timing-function属性示例

将鼠标移到图片上,图片会旋转!

Copyright© 2011-2016 www.baike369.com All Rights Reserved