Den transition-durationegenskab, der normalt anvendes som en del af transitionstenografi, anvendes til at definere varigheden af en bestemt overgang. Det vil sige, hvor lang tid det tager for det målrettede element at overgå mellem to definerede stater.
.example ( transition-duration: 3s; )Værdien kan være en af følgende:
- En gyldig tidsværdi (defineret i sekunder eller millisekunder)
- En komma-adskilt liste over tidsværdier til overgang af flere egenskaber på et enkelt element
Standardværdien for transition-durationer 0s, hvilket betyder, at ingen overgang finder sted, og ejendomsændringen finder sted med det samme, selvom de andre overgangsrelaterede egenskaber er defineret. Tidsværdien kan udtrykkes som et decimalbaseret tal for mere præcis timing, og negative værdier er ikke tilladt.
Følgende CodePen viser en svæveeffekt på et felt, der bruger transition-durationværdien 1stil gradvist at ændre baggrundsfarven:
For kompatibilitet i alle understøttende browsere kræves leverandørpræfikser med standardsyntaxen erklæret sidst:
.example ( -webkit-transition-duration: 700ms; -moz-transition-duration: 700ms; -o-transition-duration: 700ms; transition-duration: 700ms; )IE10 (den første stabile version af IE, der understøtter transition-duration) kræver ikke -ms-præfikset.
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Arbejder | Arbejder | 4+ | 10.5+ | 10+ | 2.1+ | 3.2+ |