Detailed explanation of the transition-duration attribute of CSS3:
This attribute is used to set the duration of the animation transition. For more information, please refer to the chapter "Detailed explanation of the transition attribute of CSS3".
Grammar structure:
transition-duration：<time>[ ,<time> ]*
Parameter analysis:
<time>: Set the time of the transition effect.
Special Note:
1. Setting multiple properties needs to be separated by commas. This time corresponds to the transition property set by the transition-property property.
2. The corresponding script feature is transitionDuration.
Code example:
Example 1:
<!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>The above code can set the transition time to 2 seconds, which means that the transition effect of width and height is completed within 2 seconds .
Example 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>The above code sets the width animation to be completed within 2 seconds, and the height animation to be completed within 5 seconds.
Next Section