CSS3 トランジションtransition-duration プロパティ
CSS3のtransition-duration屬性の詳細(xì)説明:
この屬性は、アニメーションの遷移時(shí)間を設(shè)定するために使用されます。詳細(xì)については、「CSS3のtransition屬性の詳細(xì)な説明」の章を參照してください。
文法構(gòu)造:
transition-duration：<time>[ ,<time> ]*
パラメータ分析:
<time>: トランジション効果の時(shí)間を設(shè)定します。
特記事項(xiàng):
1. 複數(shù)のプロパティを設(shè)定する場(chǎng)合は、transition-property で設(shè)定されたtransition プロパティと 1 対 1 で対応する必要があります。
2. 対応するスクリプト機(jī)能はtransitionDurationです。
コード例:
例 1:
<!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> 上記のコードは、トランジション時(shí)間を 2 秒に設(shè)定できます。これは、幅と高さのトランジション効果が 2 秒以內(nèi)に完了することを意味します。
例 2:
<!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)に完了するように設(shè)定し、高さのアニメーションが 5 秒以內(nèi)に完了するように設(shè)定します。
