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.

Formation continue

nouveau fichier

<!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>

soumettre Réinitialiser le code

Opération automatique

Propriété transition-durée de transition CSS3

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]