OUJOOD.COM
Tutoriel sur la propriété CSS transition-delay: définition
La propriété CSS transition-delay permet de spécifier le délai avant que le début d'une transition ne se produise après qu'un événement déclencheur (comme un hover) se soit produit. Elle peut être utilisée pour créer des effets de transition temporisés et synchronisés.
Syntaxe générale de la propriété CSS transition-delay
transition-delay: <temps>;
La valeur <temps> peut être spécifiée en secondes (s), millisecondes (ms) ou avec des mots-clés prédéfinis tels que initial, inherit ou unset.
| Valeurs par défaut | 0s |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.transitionDelay="2s" |
Valeurs possibles de la propriété CSS transition-delay
- <temps>: spécifie le délai avant le début de la transition. Par exemple, 0.5s représente un délai de 0,5 seconde.
- initial: rétablit la valeur par défaut de la propriété.
- inherit: hérite la valeur de la propriété du parent.
- unset: rétablit la valeur par défaut de la propriété, ou hérite si aucune valeur par défaut n'est définie.
Exemples pratiques d'utilisation de la propriété CSS transition-delay
Voici un exemple qui montre comment utiliser transition-delay pour retarder le début d'une transition :
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple : la propriété transition-delay css</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
color:#fff;
transition-property: background-color;
transition-duration: 1s;
transition-timing-function: ease-in-out;
transition-delay: 0.5s;
}
.box:hover {
background-color: red;
}</style>
</head>
<body>
<h1>La propriété css transition-delay </h1> <br>
<div class="box"> Survoler moi pour voir la transition</div>
</body>
</html>
Dans cet exemple, lorsque vous survolez la boîte (élément avec la classe "box"), la couleur de fond passe progressivement du bleu au rouge avec un délai de 0,5 seconde avant que la transition ne commence.
Minuterie utilisant la transition-delay
Voici un autre effet intéressant : une barre de progression qui décompte 5 secondes par intervalles d'une demi-seconde. Pour lancer l'animation, il suffit de passer la souris sur la ligne de cases et d'attendre.
Là encore, il n'y a pas de JavaScript et très peu de CSS. Il s'agit d'un peu de bricolage, mais il est étonnamment efficace. L'astuce consiste à attribuer un délai de transition à chaque boîte pour qu'elles se déclenchent l'une après l'autre :
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple : la propriété transition-delay css</title>
<style>
.barre td {
background-color: #ef5353;
transition-timing-function: cubic-bezier(1,0,1,0);
transition-duration: 0.5s;
}
.barre:hover td {
background-color: green;
color:#fff;
}
</style>
</head>
<body>
<h1>La propriété css transition-delay </h1> <br>
<table class="barre" cellpadding="10" cellspacing="2">
<tbody>
<tr>
<td style="transition-delay: 0s;">10%</td>
<td style="transition-delay: 0.5s;">20%</td>
<td style="transition-delay: 1.0s;">30%</td>
<td style="transition-delay: 1.5s;">40%</td>
<td style="transition-delay: 2.0s;">50%</td>
<td style="transition-delay: 2.5s;">60%</td>
<td style="transition-delay: 3.0s;">70%</td>
<td style="transition-delay: 3.5s;">80%</td>
<td style="transition-delay: 4.0s;">90%</td>
<td style="transition-delay: 4.5s;">100%</td>
</tr>
</tbody>
</body>
</html>
Le cubic-bezier(1,0,1,0) représente une courbe qui commence par être plate et qui augmente brusquement à la fin de la période de transition. Vous pouvez également obtenir cet effet à l'aide de la fonction de synchronisation des steps.
Astuces et conseils d'utilisation de la propriété CSS transition-delay
- Utilisez des valeurs négatives pour commencer la transition avant l'événement déclencheur. Par exemple, -0.5s démarre la transition 0,5 seconde avant le déclenchement.
- Expérimentez avec différentes valeurs de délai pour créer des effets de transition uniques et synchronisés.
- Utilisez la propriété transition-duration en combinaison avec transition-delay pour ajuster la durée totale de la transition.
- Assurez-vous de spécifier la propriété transition-property pour définir quelles propriétés CSS doivent être affectées par la transition.
- Utilisez des fonctions de synchronisation de temps telles que cubic-bezier pour contrôler la façon dont la transition progresse pendant le délai spécifié.
- Gardez à l'esprit que l'utilisation excessive de transitions avec des délais peut entraîner une expérience utilisateur confuse ou lente. Utilisez-les avec parcimonie et pour des effets pertinents.
Avec la propriété transition-delay, vous pouvez ajouter des délais entre le déclenchement d'un événement et le début d'une transition, permettant ainsi de créer des animations plus fluides et contrôlées. Expérimentez avec cette propriété pour améliorer l'interaction utilisateur et ajouter des effets visuels attrayants à vos sites web.
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.
Les numéros suivis de -webkit- , -moz- ou -o- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 26.0 4.0 -webkit- | 10.0 | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
Voir aussi :