Propriété transition-delay de transition CSS3

Syntaxe :

 transition-delay ： <time> [, <time>]*

transition-delay est utilisé pour spécifier l'heure à laquelle une animation commence à s'exécuter, c'est-à-dire combien de temps elle prend après l'élément la valeur de l'attribut est modifiée. Commencez à exécuter l'effet de transition, sa valeur : <time> est une valeur numérique, l'unité est s (secondes) ou ms (millisecondes), son utilisation est très similaire à la durée de transition et peut également être appliqué à tous les éléments, y compris : avant et : après les pseudo-éléments. La taille par défaut est « 0 », ce qui signifie que la transformation est effectuée immédiatement, sans délai.

Parfois, nous modifions non seulement l'attribut d'un effet CSS, mais souhaitons également modifier l'effet de transition de deux ou plusieurs attributs CSS, il nous suffit alors d'enchaîner plusieurs instructions de transition avec des virgules ("," ) séparées , puis chacun peut avoir sa propre méthode de transformation de durée et de rythme temporel. Mais quelque chose à noter : les valeurs de transition-delay et de transition-duration sont toutes deux des fois, donc pour distinguer leurs positions dans la séquence, les navigateurs décident généralement en fonction de l'ordre. La première valeur qui peut être analysée en tant que temps est la seconde. la durée de transition est le délai de transition. Par exemple :

 a {    -moz-transition: background 0.5s ease-in,color 0.3s ease-out;
    -webkit-transition: background 0.5s ease-in,color 0.3s ease-out;
    -o-transition: background 0.5s ease-in,color 0.3s ease-out;
    transition: background 0.5s ease-in,color 0.3s ease-out;
  }

Si vous souhaitez exécuter tous les attributs d'effet de transition sur l'élément, nous pouvons également utiliser la valeur de tous les attributs pour fonctionner. À ce stade, ils partagent la même durée. et la méthode de transformation de taux, telle que :

 a {    -moz-transition: all 0.5s ease-in;
   -webkit-transition: all 0.5s ease-in;
   -o-transition: all 0.5s ease-in;
   transition: all 0.5s ease-in;
 }

Sur la base de ce qui précède, nous pouvons donner à la transition un raccourci : transition : <propriété> ;delay> comme indiqué ci-dessous :

Exemple de code correspondant :

p {  -webkit-transition: all .5s ease-in-out 1s;
 -o-transition: all .5s ease-in-out 1s;
 -moz-transition: all .5s ease-in-out 1s;
 transition: all .5s ease-in-out 1s;}

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 type="text/css"> 
#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;
   
  transition-delay:2s;
  -moz-transition-delay:2s;
  -webkit-transition-delay:2s;
  -o-transition-delay:2s;
}
#thediv:hover{
  width:500px;
  height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

Dans le code ci-dessus, passer la souris sur le div nécessite un délai de deux secondes avant d'exécuter l'effet d'animation.
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;
   
  transition-delay:2s,6s;
  -moz-transition-delay:2s,6s;
  -webkit-transition-delay:2s,6s;
  -o-transition-delay:2s,6s;
}
#thediv:hover{
  width:500px;
  height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

Dans le code ci-dessus, lorsque la souris survole le div, elle retardera respectivement 2 secondes et 6 secondes avant de démarrer pour pointer vers les effets de transition animés.

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; transition-delay:2s,6s; -moz-transition-delay:2s,6s; -webkit-transition-delay:2s,6s; -o-transition-delay: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-delay 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]