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.
section suivante