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

CSS3 transition-duration属性


定义

CSS3的transition-duration属性定义动画播放一次的时间。


语法

transition-duration:<time> [, <time>]* 

相关属性:transition-property,transition-timing-function,transition-delay


取值

  • transition-duration:数值,单位为s,秒。

说明

作用于所有的元素,包括:before以及:after伪元素。默认值是“0”,就是即时变换的。

引擎类型 Gecko Webkit Presto
transition-duration   -webkit-transition-duration  
浏览器   Safari、Chrome  

兼容性

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-duration属性示例-www.baike369.com</title>
<style type="text/css">
body{margin:100px;}
.transition_duration{
    -webkit-transform:rotate(10deg);
    -webkit-transition-property:all; 
    -webkit-transition-duration:1.5s; 
    -webkit-transition-timing-function:ease-in;
}
.transition_duration:hover{
    -webkit-transform:rotate(40deg);
}
</style>
</head>
<body>
<h1>CSS3 transition-duration属性示例</h1>
<p>将鼠标移到图片上,图片会旋转!</p>
<br />
<p><img class="transition_duration" src="append/20111104.jpg" width="240" height="179" /></p>
</body>
</html>

CSS3 transition-duration属性示例

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

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