De transition-durationeigenschap, normaal gesproken gebruikt als onderdeel van een transitionsteno, wordt gebruikt om de duur van een gespecificeerde overgang te definiëren. Dat wil zeggen, de tijd die het beoogde element nodig heeft om tussen twee gedefinieerde toestanden over te schakelen.
.example ( transition-duration: 3s; )De waarde kan een van de volgende zijn:
- Een geldige tijdwaarde (gedefinieerd in seconden of milliseconden)
- Een door komma's gescheiden lijst met tijdwaarden, voor het overzetten van meerdere eigenschappen op één element
De standaardwaarde voor transition-durationis 0s, wat betekent dat er geen transitie plaatsvindt en de eigendomswijziging direct plaatsvindt, zelfs als de andere transitie-gerelateerde eigenschappen zijn gedefinieerd. De tijdwaarde kan worden uitgedrukt als een decimaal getal voor een nauwkeurigere timing en negatieve waarden zijn niet toegestaan.
De volgende CodePen toont een hover-effect op een vak dat de transition-durationwaarde gebruikt 1som de achtergrondkleur geleidelijk te veranderen:
Voor compatibiliteit in alle ondersteunende browsers zijn leveranciersvoorvoegsels vereist, waarbij de standaardsyntaxis als laatste wordt verklaard:
.example ( -webkit-transition-duration: 700ms; -moz-transition-duration: 700ms; -o-transition-duration: 700ms; transition-duration: 700ms; )IE10 (de eerste stabiele versie van IE die wordt ondersteund transition-duration) vereist geen -ms-prefix.
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Werken | Werken | 4+ | 10.5+ | 10+ | 2.1+ | 3.2+ |