Valide une date grégorienne
Découvrez tout ce que vous devez savoir sur la propriété CSS transition-duration, y compris sa définition, syntaxe, valeurs possibles, exemples pratiques d'utilisation et des astuces et conseils pour son utilisation efficace.
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.
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" |
Les valeurs possibles pour la propriété transition-duration sont les suivantes :
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.
Voici quelques astuces et conseils pour une utilisation efficace de la propriété transition-duration:
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- |