La transition-durationpropriété, normalement utilisée dans le cadre d'un transitionraccourci, est utilisée pour définir la durée d'une transition spécifiée. Autrement dit, le temps qu'il faudra à l'élément ciblé pour passer entre deux états définis.
.example ( transition-duration: 3s; )La valeur peut être l'une des suivantes:
- Une valeur de temps valide (définie en secondes ou millisecondes)
- Une liste de valeurs de temps séparées par des virgules, pour la transition de plusieurs propriétés sur un seul élément
La valeur par défaut de transition-durationest 0s, ce qui signifie qu'aucune transition n'aura lieu et que le changement de propriété aura lieu immédiatement, même si les autres propriétés liées à la transition sont définies. La valeur de temps peut être exprimée sous forme de nombre décimal pour une synchronisation plus précise et les valeurs négatives ne sont pas autorisées.
Le CodePen suivant montre un effet de survol sur une boîte qui utilise une transition-durationvaleur de 1spour changer progressivement la couleur d'arrière-plan:
Pour la compatibilité dans tous les navigateurs pris en charge, les préfixes de fournisseur sont requis, avec la syntaxe standard déclarée en dernier:
.example ( -webkit-transition-duration: 700ms; -moz-transition-duration: 700ms; -o-transition-duration: 700ms; transition-duration: 700ms; )IE10 (la première version stable d'IE à prendre en charge transition-duration) ne nécessite pas le -ms-préfixe.
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Travaux | Travaux | 4+ | 10,5+ | 10+ | 2.1+ | 3.2+ |