Den transition-durationegenskapen, som normalt används som en del av transitionen förkortning, används för att definiera varaktigheten av en bestämd övergång. Det vill säga den tid det tar för det riktade elementet att övergå mellan två definierade tillstånd.
.example ( transition-duration: 3s; )Värdet kan vara något av följande:
- Ett giltigt tidsvärde (definierat i sekunder eller millisekunder)
- En kommaseparerad lista över tidsvärden för övergång av flera egenskaper på ett enda element
Standardvärdet för transition-durationär 0s, vilket innebär att ingen övergång kommer att äga rum och egendomsändringen kommer att ske omedelbart, även om de andra övergångsrelaterade egenskaperna definieras. Tidsvärdet kan uttryckas som ett decimalbaserat tal för mer exakt timing och negativa värden är inte tillåtna.
Följande CodePen visar en svävareffekt på en ruta som använder transition-durationvärdet för 1satt gradvis ändra bakgrundsfärgen:
För kompatibilitet i alla stödjande webbläsare krävs leverantörsprefix, med standardsyntax deklarerad som sist:
.example ( -webkit-transition-duration: 700ms; -moz-transition-duration: 700ms; -o-transition-duration: 700ms; transition-duration: 700ms; )IE10 (den första stabila versionen av IE som stöds transition-duration) kräver inte -ms-prefixet.
Webbläsarstöd
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Arbetar | Arbetar | 4+ | 10,5+ | 10+ | 2.1+ | 3.2+ |