CSS3轉(zhuǎn)換 transition-duration屬性
CSS3的transition-duration 屬性詳解:
此屬性用來(lái)設(shè)定進(jìn)行動(dòng)畫(huà)過(guò)渡的持續(xù)時(shí)間，想要了解更多內(nèi)容可以參閱CSS3的transition屬性詳解一章節(jié)。?
語(yǔ)法結(jié)構(gòu):
transition-duration：<time>[ ,<time> ]*
參數(shù)解析:
<time>:設(shè)定過(guò)渡效果的時(shí)間。
特別說(shuō)明:
1.設(shè)定多個(gè)屬性需要用逗號(hào)分隔，這個(gè)時(shí)間是和transition-property屬性設(shè)定的過(guò)渡屬性是一一對(duì)應(yīng)的。
2.對(duì)應(yīng)的腳本特性為transitionDuration。
程式碼實(shí)例:
實(shí)例一:
<!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>以上程式碼可以將過(guò)渡時(shí)間設(shè)定為2秒，也就是說(shuō)寬度和高度的過(guò)渡效果在2秒內(nèi)完成。
實(shí)例二:
<!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>以上程式碼設(shè)定設(shè)定寬度動(dòng)畫(huà)在2秒內(nèi)完成，設(shè)定高度動(dòng)畫(huà)在5秒內(nèi)完成。
