CSS3过渡 transition-duration属性
CSS3的transition-duration 属性详解:
此属性用来设置进行动画过渡的持续时间，想要了解更多内容可以参阅CSS3的transition属性详解一章节。
语法结构:
transition-duration：<time>[ ,<time> ]*
参数解析:
<time>:设置过渡效果的时间。
特别说明:
1.设置多个属性需要用逗号分隔，这个时间是和transition-property属性设置的过渡属性是一一对应的。
2.对应的脚本特性为transitionDuration。
代码实例:
实例一:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style>
#thediv{
width:100px;
height:100px;
background:blue;
transition-property:width,height;
-moz-transition-property:width,height;
-webkit-transition-property:width,height;
-o-transition-property:width,height;
transition-duration:2s;
-moz-transition-duration:2s;
-webkit-transition-duration:2s;
-o-transition-duration:2s;
}
#thediv:hover{
width:500px;
height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>以上代码可以将过渡时间设置为2秒，也就是说宽度和高度的过渡效果在2秒内完成。
实例二:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style>
#thediv{
width:100px;
height:100px;
background:blue;
transition-property:width,height;
-moz-transition-property:width,height;
-webkit-transition-property:width,height;
-o-transition-property:width,height;
transition-duration:2s,6s;
-moz-transition-duration:2s,6s;
-webkit-transition-duration:2s,6s;
-o-transition-duration:2s,6s;
}
#thediv:hover{
width:500px;
height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>以上代码设置设置宽度动画在2秒内完成，设置高度动画在5秒内完成。
