Den transition-durationegenskap, som normalt brukes som en del av transitionen kortform, blir brukt for å angi varigheten av en spesifisert overgang. Det vil si hvor lang tid det vil ta før det målrettede elementet overgår mellom to definerte stater.
.example ( transition-duration: 3s; )Verdien kan være en av følgende:
- En gyldig tidsverdi (definert i sekunder eller millisekunder)
- En kommaseparert liste over tidsverdier for overgang av flere egenskaper på et enkelt element
Standardverdien for transition-durationer 0s, noe som betyr at ingen overgang vil finne sted og eiendomsendringen vil skje umiddelbart, selv om de andre overgangsrelaterte egenskapene er definert. Tidsverdien kan uttrykkes som et desimalbasert tall for mer presis timing, og negative verdier er ikke tillatt.
Følgende CodePen viser en sveveeffekt på en boks som bruker transition-durationverdien til 1så gradvis endre bakgrunnsfargen:
For kompatibilitet i alle støttende nettlesere kreves leverandørprefikser, med standardsyntaks deklarert sist:
.example ( -webkit-transition-duration: 700ms; -moz-transition-duration: 700ms; -o-transition-duration: 700ms; transition-duration: 700ms; )IE10 (den første stabile versjonen av IE som støtter transition-duration) krever ikke -ms-prefikset.
Nettleserstøtte
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| Virker | Virker | 4+ | 10.5+ | 10+ | 2.1+ | 3.2+ |