CSS3過渡 transition-duration屬性
CSS3的transition-duration 屬性詳解:
此屬性用來設置進行動畫過渡的持續(xù)時間，想要了解更多內(nèi)容可以參閱CSS3的transition屬性詳解一章節(jié)。?
語法結構:
transition-duration：<time>[ ,<time> ]*
參數(shù)解析:
<time>:設置過渡效果的時間。
特別說明:
1.設置多個屬性需要用逗號分隔，這個時間是和transition-property屬性設置的過渡屬性是一一對應的。
2.對應的腳本特性為transitionDuration。?
代碼實例:
實例一:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ipnx.cn/" />
<title>php中文網(wǎng)</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秒內(nèi)完成。
實例二:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ipnx.cn/" />
<title>php中文網(wǎng)</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秒內(nèi)完成，設置高度動畫在5秒內(nèi)完成。
