Propriété transition-durée de transition CSS3
Explication détaillée de l'attribut transition-duration de CSS3 :
Cet attribut est utilisé pour définir la durée de la transition d'animation. Pour plus d'informations, veuillez vous référer au chapitre "Explication détaillée de la transition d'animation". attribut de transition de CSS3".
Structure grammaticale :
transition-duration：<time>[ ,<time> ]*
Analyse des paramètres :
<time> : définissez l'heure de l'effet de transition.
Instructions spéciales :
1. La définition de plusieurs propriétés doit être séparée par des virgules. Cette fois correspond à la propriété de transition définie par la propriété transition-property.
2. La fonctionnalité de script correspondante est transitionDuration.
Exemple de code :
Exemple 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>Le code ci-dessus peut définir le temps de transition à 2 secondes, ce qui signifie que l'effet de transition de la largeur et de la hauteur est terminé dans 2 secondes.
Exemple 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>Le code ci-dessus définit l'animation de largeur à terminer dans les 2 secondes et l'animation de hauteur à terminer dans les 5 secondes.
![Combat réel Front-end Vue3 [projet vue manuscrit]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![Tutoriel APIPOST [Vulgarisation des concepts techniques liés à la communication réseau]](https://img.php.cn/upload/course/000/000/068/63996f34c6c94370.png)
