transition-durationOminaisuus, jota käytetään tavallisesti osana transitionpika, käytetään määrittämään keston tietyn siirtymän. Toisin sanoen, kuinka kauan kohdennettu elementti siirtyy kahden määritellyn tilan välillä.
.example ( transition-duration: 3s; )Arvo voi olla jokin seuraavista:
- Voimassa oleva aika-arvo (määritetty sekunteina tai millisekunteina)
- Pilkulla erotettu luettelo aika-arvoista useiden ominaisuuksien siirtämiseksi yhdelle elementille
Oletusarvo transition-durationon 0s, mikä tarkoittaa, että mitään siirtymistä ei tapahdu ja ominaisuuden muutos tapahtuu välittömästi, vaikka muutkin muutokseen liittyvät ominaisuudet olisi määritelty. Aika-arvo voidaan ilmaista desimaalilukuna tarkempaa ajoitusta varten, ja negatiivisia arvoja ei sallita.
Seuraava CodePen näyttää hiiren vaikutuksen ruutuun, joka käyttää transition-durationarvoa 1svaihtaakseen taustaväriä asteittain:
Yhteensopivuuden takaamiseksi kaikissa tukevissa selaimissa tarvitaan toimittajan etuliitteet, ja vakiosyntaksi on julistettu viimeiseksi:
.example ( -webkit-transition-duration: 700ms; -moz-transition-duration: 700ms; -o-transition-duration: 700ms; transition-duration: 700ms; )IE10 (IE: n ensimmäinen tukeva vakaa versio transition-duration) ei vaadi -ms-etuliitettä.
Selaimen tuki
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Toimii | Toimii | 4+ | 10,5+ | 10+ | 2.1+ | 3.2+ |