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秒內完成。
下一節