OUJOOD.COM
Tutoriel : La propriété CSS transition-duration
Définition
La propriété CSS transition-duration spécifie la durée sur laquelle une transition doit s'effectuer lorsqu'un élément change d'état.
Syntaxe générale
La syntaxe générale de la propriété transition-duration est la suivante :
transition-duration: valeur;
où valeur représente la durée de la transition, exprimée en secondes (s) ou en millisecondes (ms).
| Valeurs par défaut | 0s |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.transitionDuration="1s" |
Valeurs possibles
Les valeurs possibles pour la propriété transition-duration sont les suivantes :
- valeur : une valeur numérique positive suivie de l'unité de temps (s ou ms).
Exemples pratiques d'utilisation
Voici un exemple d'utilisation de la propriété transition-duration :
Exemple : 📋 Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple : la propriété transition css</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: #eee;
transition-property: background-color;
transition-duration: 0.5s;
}
.box:hover {
background-color: #ffcc00;
}
</style>
</head>
<body>
<h1>La propriété css transition </h1> <br>
<div class="box">Survoler moi avec la souri</div>
</body>
</html>
Cet exemple applique une transition d'une durée de 0.5 seconde à la propriété background-color lorsqu'un survol de la souris est détecté sur l'élément avec la classe box.
Astuces et conseils d'utilisation
Voici quelques astuces et conseils pour une utilisation efficace de la propriété transition-duration:
- Utilisez des valeurs appropriées pour la durée de la transition afin d'obtenir des effets visuels fluides sans que la transition paraisse trop lente ou trop rapide.
- Expérimentez avec différentes durées pour trouver le timing optimal qui correspond à votre design et à l'effet souhaité.
- Utilisez des valeurs de durée cohérentes sur l'ensemble de votre site ou application pour garantir une expérience utilisateur homogène.
- Évitez de définir des durées de transition trop longues, car cela pourrait ralentir la réactivité de votre interface.
- Envisagez d'utiliser des valeurs de durée variables pour différentes propriétés de transition afin de créer des effets d'animation plus complexes.
- Combinez la propriété transition-duration avec d'autres propriétés de transition telles que transition-property et transition-timing-function pour contrôler davantage le comportement des transitions.
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- |