transition-durationProprietatea, utilizate în mod normal ca parte a transitionstenografie, este utilizat pentru a defini durata unei tranziții specificate. Adică durata de timp necesară pentru ca elementul vizat să treacă între două stări definite.
.example ( transition-duration: 3s; )Valoarea poate fi una dintre următoarele:
- O valoare de timp validă (definită în secunde sau milisecunde)
- O listă de valori de timp separate prin virgulă, pentru tranziția mai multor proprietăți pe un singur element
Valoarea implicită pentru transition-durationeste 0s, adică nu va avea loc nicio tranziție și schimbarea proprietății va avea loc imediat, chiar dacă sunt definite celelalte proprietăți legate de tranziție. Valoarea timpului poate fi exprimată ca un număr zecimal pentru o sincronizare mai precisă, iar valorile negative nu sunt permise.
Următorul CodePen arată un efect de hover pe o casetă care folosește o transition-durationvaloare de 1spentru a schimba treptat culoarea de fundal:
Pentru compatibilitate în toate browserele compatibile, sunt necesare prefixele furnizorului, cu sintaxa standard declarată ultima:
.example ( -webkit-transition-duration: 700ms; -moz-transition-duration: 700ms; -o-transition-duration: 700ms; transition-duration: 700ms; )IE10 (prima versiune stabilă de IE care acceptă transition-duration) nu necesită -ms-prefixul.
Suport pentru browser
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Lucrări | Lucrări | 4+ | 10.5+ | Peste 10 ani | 2.1+ | 3.2+ |